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

Question

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 1

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)

Answer 2

React-datepicker requires an instance of Date to be passed for configuration values such as startDate, etc. (or possibly it also excepts timestamp integers, not sure).

You can use

new Date(Date.parse("2019-06-15T00:00:00"));

To create a date instance. Date.parse() recognizes many date string formats and converts them to timestamp values which in turn are accepted by the Date() constructor.

Answer 3

You can use latest date-fns library in Javascript and use below for format

import { format, parseISO } from 'date-fns' 

format(parseISO(DateinISOformat), "MMM dd h:m a") 

Example below -

format(parseISO('2019-06-15T00:00:00'), "MMM dd h:m a")