在React Native中使用DateTimePicker来显示日期的方法如下:
@react-native-community/datetimepicker
库:npm install @react-native-community/datetimepicker --save
import DateTimePicker from '@react-native-community/datetimepicker';
state = {
date: new Date(),
};
render() {
return (
<View>
<TextInput
value={this.state.date.toDateString()} // 将日期对象转换为字符串显示在文本框中
editable={false} // 禁止编辑文本框
/>
<Button title="选择日期" onPress={this.showDatePicker} />
{this.state.showDatePicker && (
<DateTimePicker
value={this.state.date}
mode="date"
onChange={this.handleDateChange}
/>
)}
</View>
);
}
showDatePicker = () => {
this.setState({ showDatePicker: true });
};
handleDateChange = (event, date) => {
if (date !== undefined) {
this.setState({ date, showDatePicker: false });
} else {
this.setState({ showDatePicker: false });
}
};
constructor(props) {
super(props);
this.state = {
date: new Date(),
showDatePicker: false,
};
this.showDatePicker = this.showDatePicker.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}
通过以上步骤,你就可以在React Native中使用DateTimePicker来显示日期,并将选择的日期显示在文本框中了。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云