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

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

const selected = moment(isoDateStr).toDate()

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.

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 react-datepicker@2.5.0, which use js date type now.

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)

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

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!

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

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

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 👍

@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

The selected prop takes directly the date object, hence we have to convert any date string to a date object. it can be done by passing selected={new Date(dateInAnyString)} and it should work

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"
  />

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

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.

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.

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.

I am also getting the same issue with react-datepicker@2.5.0

Any luck?