反应本机可重用的DateTimePicker和Input OnChange

时间:2019-07-11 17:08:41

标签: javascript react-native native-base

我创建了一个接收日期(字符串格式)的Input。当我单击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;
};

0 个答案:

没有答案
相关问题