how to set default value as selected date in text filed after selcted-CodePudding

i am trying to make a date piker i am able to open the date picker and delect date but i am not able to dispaly the picked date in the input fild 1s a date is selected

  const [text, setpicdate] = useState(); //date is slected here
const [mydate, setDate] = useState(new Date());
 const [displaymode, setMode] = useState('date');
 const [isDisplayDate, setShow] = useState(false);
 const changeSelectedDate = (event, selectedDate) => {
   setDate(selectedDate);
   setpicdate(selectedDate);

   setShow(false);
 };
 const showMode = currentMode => {
   setShow(true);
   setMode(currentMode);
 };
 const displayDatepicker = () => {
   showMode('date');
 };


<TextInput
         style={styles.forminput}
         label="Baby's Date of Birth"
         defaultValue={text}  // displaying date error
         onPressIn={displayDatepicker}
         // onclick={displayDatepicker}
       />
{isDisplayDate && (
         <DateTimePicker
           testID="dateTimePicker"
           value={mydate}
           mode={displaymode}
           is24Hour={true}
           display="default"
           // onDateChange={text => {
           //   setTextname(text);
           // }}
           // // onChange={text => changeSelectedDate()}
           onChange={changeSelectedDate}
         />
       )}

CodePudding user response：

Replace your TextInput by

<TouchableOpacity onPress={displayDatepicker}>
 <Text>{moment(mydate).format('DD/MM/YYYY')}</Text>
</TouchableOpacity>

use moment js npm package for dates formatting and validation https://www.npmjs.com/package/moment

CodePudding user response：

Update Your code Like this, it will work.

import DateTimePicker from '@react-native-community/datetimepicker';
import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';
export default function Test() {
  const [mydate, setDate] = useState(new Date());
  const [displaymode, setMode] = useState('time');
  const [text, setpicdate] = useState(new Date());
  const [isDisplayDate, setShow] = useState(false);
  const changeSelectedDate = (event, selectedDate) => {
    setpicdate(selectedDate);
    setShow(false);
  };
  const showMode = currentMode => {
    setShow(true);
    setMode(currentMode);
  };
  const displayTimepicker = () => {
    showMode('date');
  };
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        onFocus={displayTimepicker}
        defaultValue={mydate.toDateString()}
        value={text.toDateString()}
        style={{backgroundColor: 'lightgray', height: 50, width: '70%'}}
        label="Baby's Date of Birth"
      />
      {isDisplayDate && (
        <DateTimePicker
          testID="dateTimePicker"
          value={mydate}
          mode={displaymode}
          is24Hour={true}
          display="default"
          onChange={changeSelectedDate}
        />
      )}
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CodePudding user response：

**This may work : value={new Date(mydate.toString())}**
example:

    <TextInput
             style={styles.forminput}
             label="Baby's Date of Birth"
             value={new Date(mydate.toString())}
             onPressIn={displayDatepicker}
           />