react native DateTimePicker set initial state to String

Question

I'm trying to implement react-native-datetimepicker and i want to set an initial state text "Edit Date of Birth" instead of current today Date, can anyone guide me on how to achieve that? It seems that i can't use a string as a value in the date hook.

  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

return (
<Text>{date.toDateString()}</Text>
<DateTimePicker
              testID="dateTimePicker"
              value={date}
              mode={mode}
              is24Hour={true}
              display="default"
              onChange={onChange}/>

Answer 1

You need a Text/Button component displaying the message if you don't have a selected date (Initialized as null) yet.

const [date, setDate] = useState(null);
const [show, setShow] = useState(false);

const showDate = () => {
   setShow(true)
}

const onChange = (event, selectedDate) => {
   const currentDate = selectedDate || date;
   setShow(Platform.OS === 'ios');
   setDate(currentDate);
};

return (

<View>
<Button onPress={showDate} title={ date ? date.toDateString() : 'Edit Date of Birth'} />

{show && ( 
   <DateTimePicker 
       testID="dateTimePicker" 
       value={date} 
       is24Hour={true} 
       display="default" 
       onChange={onChange}/> 
}
</View>

)