React-datepicker: throw out RangeError('Invalid time value')

[gamesover]

Expected behavior

Hello, I want to use the component to select date, but it keeps throwing out Invalid time value error. No idea why.

Actual behavior

The below is where error was throw out.

  if (!isValid(originalDate)) {
    throw new RangeError('Invalid time value');
  } // Convert the date in system timezone to the same date in UTC+00:00 timezone.
  // This ensures that when UTC functions will be implemented, locales will be compatible with them.
  // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376

Steps to reproduce

<DatePicker
      selected={this.state.date}
      onChange={(value:any)=> {
     // value here is javascript date object
      this.setState({date: moment(value)})
       }}
  />

I tested the above simple case, it throws the same error. Really confused.

[gamesover]

I found the issue, I am using react-datepicker 2.5.0 + typescript + "@types/react-datepicker": "^1.1.7". After upgrade "@types/react-datepicker": "^2.3.0". Problem solved

[abepark01]

I am also getting the same issue with [email protected]

Any luck?

[gamesover]

react-datepicker before version 2, it use moment for date type
after version 2, it use js date type

please pay attention whether the version of react-datepicker is consist with the version of @types/react-datepicker. Typescript shall give you warning.

It is very likely you pass moment date to [email protected], which use js date type now.

[abepark01]

@gamesover Thanks for the heads up.
I was also passing in a moment object into the selected prop.

const selected = moment(isoDateStr).toDate()

[allysson-esparta]

@gamesover Thanks for the heads up.
I was also passing in a moment object into the selected prop.

const selected = moment(isoDateStr).toDate()

It`s worf for me

[jschimmoeller]

hey heads up i am using 2.9.6 with js Date object and i am getting this error also; so something inside library

[stinachen]

hey heads up i am using 2.9.6 with js Date object and i am getting this error also; so something inside library

I'm also seeing the same thing when I try to initialize selected with new Date(). It works if I leave it un-initialized.

[darleendenno]

hey heads up i am using 2.9.6 with js Date object and i am getting this error also; so something inside library

Same! Any news on this?

[KevinGrant12]

Also using 2.9.6 and getting the same error.
Consdering nobody cares about this error, I'll just go use the other datepicker. Thanks for the awesome support!

[switch900]

Try Date.Parse. Below is sample of working code

const handleChange = date => {
setChildInfo({ ...childInfo, birthDate: date })
};

selected={Date.parse(childInfo.birthDate)}
onChange={handleChange}
/>

[AlexanderArce]

Same issue but only happening on Safari, which is weird.
In Firefox and Chrome is working as expected.

selected={event.start ? new Date(event.start) : null}

Edit: Adding .replace(/-/g, '/') to event.start seems to solve the problem for me.

[nuposyatina]

I have same issue only in Safari. I think it happens because Safari doesn't support <input type='time'>
When I delete the colon, date cannot be parsed.
I added this code in onChange listener:
if (!(dateIn instanceof Date && !isNaN(dateIn))) return;
Instead of an error, the previous date is selected until the user enters a new date.
It helps me, so I hope it helps you too.

[hanzlahabib]

i am facing same issue with simple datepicker
i am initializing date with new Date()

[silverspectro]

problems seems to be the langage of the date.
On Firefox, changing the langage in the Preferences from English to French cause the problem to appear. Having Firefox in English makes the problem disappear.
I suspect the datepicker to try to interprete with the engish format by default, and then on click it uses the langage of the JS Date object which is the the one of the browser by default. If it is the same it works, else not.

[Assdi]

Same issue but only happening on Safari, which is weird.
In Firefox and Chrome is working as expected.

selected={event.start ? new Date(event.start) : null}

Edit: Adding .replace(/-/g, '/') to event.start seems to solve the problem for me.

works for me 👍

[abhinav2331]

I also faced same issue in my application.
But I got the solution by reduce my version to react-datepicker": "2.3.0"

Please use this version and fix you issues.

[udielenberg]

I fixed it by changing wherever I had to pass null with undefined instead

[timrobinson33]

I had the same problem when binding the date picker to a field in an object that had been parsed from a fetch() call, something like this (in Typescript):

class Person: {
  name: string;
  birthDate: Date;
}
var result = await fetch(...);
var person : Person = await result.json();
this.setState(person);

Being used to strongly typed languages, I had fallen into the trap of thinking that the json parser would convert the birthDate to a Date but of course json doesn't know about date types so the birthDate field is just a string. I fixed it with

person.birthDate = person.birthDate ? new Date(person.birthDate) : null

(technically this would also have the effect of replacing undefined with null, but that suited my purposes anyway)

[Drewlove]

This worked for me! Thank you.

[suraj-omni]

@gamesover Thanks for the heads up.
I was also passing in a moment object into the selected prop.

const selected = moment(isoDateStr).toDate()

It`s worf for me

worked

[mrabaev48]

I am also getting the same issue with [email protected]
Any updates?

[abigray]

I resolved this by wrapping my string date into a Date object. This got rid of the error:

````
const [date, setDate] = useState(null);

async function onLoad() {
setDate(new Date(myLoadedDate));
}

selected={date}
onChange={date => setDate(date)}
showTimeSelect
timeFormat="hh:mm aa"
timeIntervals={15}
timeCaption="Time"
dateFormat="MMMM d, yyyy h:mm aa"
/>
````

[CoDigo93]

I resolved this by wrapping my string date into a Date object. This got rid of the error:

const [date, setDate] = useState(null);

 async function onLoad() {
      setDate(new Date(myLoadedDate));
}

 <DatePicker
            selected={date}
            onChange={date => setDate(date)}
            showTimeSelect
            timeFormat="hh:mm aa"
            timeIntervals={15}
            timeCaption="Time"
            dateFormat="MMMM d, yyyy h:mm aa"
  />

where did this 'myLoadedDate' come from?is it a client-side request or did you get from the database?

[jerrycaffe]

`

selected={startDate}
dateFormat="MMMM d, yyyy h:mm aa"
onChange={handleDateTime}

/>`
experiencing the same error, spent 4 hours on it

[timrobinson33]

Make sure the selected date you pass in (i.e. startDate value) is a JavaScript Date object, not a string

`

selected={startDate}
dateFormat="MMMM d, yyyy h:mm aa"
onChange={handleDateTime}

/>`
experiencing the same error, spent 4 hours on it

[chiweip]

moment().toDate() somehow does not work. But JS's Date.parse() works:

Date.parse(moment(dateString, 'MM/DD/YYYY').toISOString())

[robertfobrien]

I have the same issue even on react-datepicker@^3.3.0. Getting this error