Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 428
Rohit Sawai Avatar asked Dec 06 '22 09:12

Rohit Sawai


2 Answers

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)
like image 137
ravibagul91 Avatar answered Jan 21 '23 07:01

ravibagul91


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.

like image 29
marekful Avatar answered Jan 21 '23 06:01

marekful