How can I show the selected time in 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}
        />
      </>
    );
  }
}