How can I show the selected time in React Native - react-native

Question

First of all, hello everyone. This is my first question.
I'm trying to use time picker in React Native. I installed the package from the repo on GitHub. 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

Answer 1

You could use moment to format your time and then display it ,
moment(date).format('LT') /// example : 8:30 PM

Answer 2

your can get Date text in parameter date . in handleConfirm save date in one state and show it in Text :)
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}
/>
</>
);
}
}