Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

Rohit Sawai picture Rohit Sawai · Aug 21, 2019 · Viewed 9.8k times · Source

I'm trying to set selected parameter as default date of DatePicker of react-datepicker. Basically date which I'm getting from database is in following format:

event_date: "2019-06-15"

and when I set state, that date shows in this way - event_date: "2019-06-15T00:00:00"

I have tried to new Date() for converting it into JavaScript compatible date. Also tried MomentJS but then also it's throwing same error. When I call new Date() in selected parameter then everything works perfectly. I mean, DatePicker shows default todays date. But when I try to set custom date value to DatePicker, it throws error - RangeError: Invalid time value.

Can anyone tell me what type of data DatePicker need for setting custom date?

Answer

ravibagul91 picture ravibagul91 · Aug 21, 2019

It seems your date is in string format. Datepicker don't accept string date.

You need to parse the string date to actual date using parseISO

import { parseISO } from 'date-fns' 

Usage,

parseISO(your_custom_date)