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