How do I view the selected date in a textInput?

[sangeeth70]

I'm a newbie and can anyone please tell me how am I able to view the date that I choose from the calendar in a textInput. If you wanna know, I need that for client-side to choose their date of birth in register page.

[itzmail]

You can save on local state, and then put local state which contains picked date in TextInput

[rickspencer]

As @itzmail said but in more detail:

You will need to import useState from react...

import React, { useState } from 'react';

Setup your states

// this provides the default date and handles the date change
const [selectedDate, setSelectedDate] = useState(new Date()); 

// this one is used to hide or show your date picker
const [datePickerVisible, setDatePickerVisible] = useState(false);

setup functions

const showDatePicker = () => {
  setDatePickerVisible(true);
};
const hideDatePicker = () => {
  setDatePickerVisible(false);
};

setup handler for state changes and hiding the picker.

const handleDatePickerConfirm = (date) => {
  setSelectedDate(date);
   hideDatePicker();
};

lastly setup the date picker.
This can be done design wise many ways...
I like to start with a view as a main wrapper and then put in the view a Text element that I use as the Label then a TouchableOpacity with an Ionicons and TextInput nested inside that. lastly the DateTimePickerModal

just remember to set the value of the TextInput with a turnery function like this making sure you get the appropriate country code for your time format.

<View style={Styles.inputWrapper}>
  <Text style={Styles.inputLabel}>Exam Date:</Text>
    <TouchableOpacity style={[{flexDirection:'row'},Styles.datePickerInput]} onPress={showDatePicker}>
      <Ionicons name="calendar-outline" size={32} color={'#0289d1'}/>
      <TextInput style={[Styles.examDate,Styles.dateInputTxt]}>{selectedDate ? selectedDate.toLocaleDateString('en-AU') : ''}</TextInput>
    </TouchableOpacity>
    <DateTimePickerModal
      value={selectedDate}
      isVisible={datePickerVisible}
      mode="date"
      onConfirm={handleDatePickerConfirm} // this function is what will update your TextInput with the selected value
      onCancel={hideDatePicker}
    />
</View>

Hope this helps...