Range Error: Invalid time value

[daviwesley]

Issue

I am using date-fns to format the date but when I change to a different date I get this error Range Error: Invalid time value

Expected Behavior

Show formated date and chage the date

Code

import { format } from 'date-fns';
// ...
const [date, setDate] = useState(new Date());
//...
<DatePicker
        style={{ width: 200 }}
        date={date}
        mode="date"
        placeholder="select date"
        // format="YYYY-MM-DD"
        getDateStr={date => format(date, "d MMMM yyyy")}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0,
          },
          dateInput: {
            marginLeft: 36,
          },
        }}
        onDateChange={date => {
          setDate(date)
        }}
      />

Environment

1. react-native -v: react-native: 0.59.3
2. node -v: v10.16.3
3. npm -v: 6.9.0
4. yarn --version:
5. target platform: Android
6. operating system: Ubuntu

[Mohammad-Khalid23]

onDateChange={date => { setDate(new Date(date)) }} getDateStr={date => format(new Date(date), "d MMMM yyyy")}

I think this can be a solution of your problem ,because date picker return date format in string and the date-fns need Date object to format it.

[daviwesley]

it worked like a charm! ty!