Реагируйте на собственный повторно используемый DateTimePicker и Input OnChange - PullRequest
Новая
       26

Реагируйте на собственный повторно используемый DateTimePicker и Input OnChange

0 голосов
/ 11 июля 2019

Я создал Ввод, который получает дату (в формате String). Когда я нажимаю на Input, он открывает модальный DateTimePicker для изменения значения. У меня две проблемы: 1) Как я могу установить DateTimePicker для повторного использования (принимать разные даты)? 2) Есть ли OnPress для родного базового ввода? onFocus не открывает модал, если я уже в поле. 

import {
  Container, Header, Content, Card, Input,
  CardItem, Text, Right, Icon, Footer, FooterTab,
  Left, Body, Title, Button, Item }
from 'native-base';
import DateTimePicker from 'react-native-modal-datetime-picker';
import { getFormattedDate } from '../common/Helper';
...

class Test extends Component {
    ...
    showDateTimePicker = () => {
        this.setState({
          ...this.state.MyData,
          isDateTimePickerVisible: true
        });
    };

    hideDateTimePicker = () => {
        this.setState({
           ...this.state.MyData,
           isDateTimePickerVisible: false
        });
    };

    handleDatePicked = date => {
         const obj = { ...this.state.MyData };
         obj.Date1 = String(date);
         this.setState({
             MyData: obj
         });
         this.hideDateTimePicker();
    };

    render() {
        const {
            Date1, Date2, ...
        } = this.state.MyData;
        ...
        <Input
            style={styles.valueText}
            onFocus={this.showDateTimePicker}
            value={getFormattedDate(Date1)}
        />
        <Input
            style={styles.valueText}
            onFocus={this.showDateTimePicker}
            value={getFormattedDate(Date2)}
        />
        ... Date3 ...

        <DateTimePicker
            isVisible={this.state.isDateTimePickerVisible}
            onConfirm={this.handleDatePicked}
            onCancel={this.hideDateTimePicker}
            date={Date1}
       />
    }
}

Вот мой класс Helper для обработки форматирования даты 

export const toDate = (dateStr) => {
  const [year, month, day] = dateStr.split('-');
  return new Date(year, month - 1, day);
};

// mm/dd/yyyy
export const getFormattedDate = (date = new Date()) => {
  const myDate = new Date(date);
  const year = myDate.getFullYear();
  const month = (1 + myDate.getMonth()).toString().padStart(2, '0');
  const day = myDate.getDate().toString().padStart(2, '0');

  return month + '/' + day + '/' + year;
};
...