[英]How can I show the selected time in React Native
First of all, hello everyone.首先,大家好。 This is my first question.这是我的第一个问题。
I'm trying to use time picker in React Native.我正在尝试在 React Native 中使用时间选择器。 I installed the package from the repo on GitHub.我从 GitHub 上的 repo 安装了这个包。 But I couldn't display the time in the text component?但是我无法在文本组件中显示时间? How can I do?我能怎么做?
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>
);
};
enter image description here在此处输入图片说明
https://github.com/mmazzarolo/react-native-modal-datetime-picker https://github.com/mmazzarolo/react-native-modal-datetime-picker
your can get Date text in parameter date
.您可以在参数date
获取日期文本。 in handleConfirm
save date in one state
and show it in Text :)在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.