[英]I want to show Selected Date and time in react native dateTimePicker
[英]How can I show the selected time in React Native
首先,大家好。 这是我的第一个问题。
我正在尝试在 React Native 中使用时间选择器。 我从 GitHub 上的 repo 安装了这个包。 但是我无法在文本组件中显示时间? 我能怎么做?
const Example = (props) => {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const handleConfirm = (date) => {
console.warn("A date: ", date);
settimeShow(date)
hideDatePicker();
};
return (
<View>
<Button title="Show Time Picker" onPress={showDatePicker} />
<Text>
?
</Text>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="time"
onConfirm={handleConfirm}
onCancel={hideDatePicker}
/>
</View>
);
};
https://github.com/mmazzarolo/react-native-modal-datetime-picker
您可以在参数date
获取日期文本。 在handleConfirm
在一种state
保存日期并在文本中显示:)
import React, { Component } from "react";
import { Button, View } from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";
export default class DateTimePickerTester extends Component {
constructor(props) {
super(props);
this.state = {
isDateTimePickerVisible: false,
selectedDate:'',
};
}
showDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: true });
};
hideDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: false });
};
handleDatePicked = date => {
console.log("A date has been picked: ", date);
setstate({selectedDate:date});
this.hideDateTimePicker();
};
render() {
return (
<>
<Button title="Show DatePicker" onPress={this.showDateTimePicker} />
<Text>this.state.selectedDate</Text>
<DateTimePicker
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this.handleDatePicked}
onCancel={this.hideDateTimePicker}
/>
</>
);
}
}
您可以使用moment来格式化您的时间,然后显示它,
moment(date).format('LT') /// example : 8:30 PM
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.