Home > front end >  How do I display the date & time from using this module?
How do I display the date & time from using this module?

Time:07-25

I want to display current date and time. The condition is: Before select, It'll be shown current date and time and after select, It should be show the selected date and time.

Below is the whole code:

import DateTimePickerModal from "react-native-modal-datetime-picker";

const [pickerMode, setPickerMode] = useState(false);
const [selectedDate, setSelectedDate] = useState();

return (
  <View style={style.root}>
    <Button title="Show DateTime Picker" onPress={() => setPickerMode(true)} />
    <DateTimePickerModal
      isVisible={pickerMode}
      mode="datetime"
      onConfirm={(date) => {
        setPickerMode(false);
        Alert.alert(`${date}`)
      }}
      onCancel={() => setPickerMode(false)}
    />
    <Text>selected date time is: {selectedDate}</Text>
  </View>
);

CodePudding user response:

You can try this,

npm i moment to install moment to formate your date and time

import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from 'moment';

const [pickerMode, setPickerMode] = useState(false);
const [selectedDate, setSelectedDate] = useState(moment(new Date()).format('DD-MM-YYYY hh:mm A'));

return (
  <View style={style.root}>
    <Button title="Show DateTime Picker" onPress={() => setPickerMode(true)} />
    <DateTimePickerModal
      isVisible={pickerMode}
      mode="datetime"
      onConfirm={(date) => {
        setSelectedDate(moment(date).format('DD-MM-YYYY hh:mm A'));
        setPickerMode(false);
      }}
      onCancel={() => setPickerMode(false)}
    />
    <Text>selected date time is: {selectedDate}</Text>
  </View>
);
  • Related