Range error invalid time value

  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

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

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

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

Any luck?

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.

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

const selected = moment(isoDateStr).toDate()

@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

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

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.

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?

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!

Try Date.Parse. Below is sample of working code

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

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.

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.

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

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.

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 👍

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 fixed it by changing wherever I had to pass null with undefined instead

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)

This worked for me! Thank you.

@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

I am also getting the same issue with react-datepicker@3.0.0
Any updates?

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 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?

` <DatePicker

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

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

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

` <DatePicker

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

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

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

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

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

Same issue here, but it works in several computers just in my Mac it throws the error.
Versions:

"typescript": "^4.2.3",
"react-datepicker": "^3.4.1",
"@types/react-datepicker": "^3.1.7",

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

This one is worked for me. Thanks guys😊

const selected = moment(isoDateStr).toDate()

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Have the same problem. Version 4.8. How to solve?

Have the same problem. Version 4.8. How to solve?

see other comments above — make sure you are passing in a Date object, not a string

Have the same problem. Version 4.8. How to solve?

see other comments above — make sure you are passing in a Date object, not a string

It doesn’t work.

Code below.

const [startDate, setStartDate] = useState(orderDate || date);

const orderDate = new Date(props.orderDate);

<DatePicker dateFormat="MM-dd-yyyy" className={classes["order-date-input"]} selected={orderDate} onChange={(val) => setStartDate(val)} />

I can’t really understand your code sample — you seem to have 4 separate date variables startDate, orderDate, props.orderDate, and date; orderDate is used before it’s defined; and the one you’re passing as selected isn’t the same one you’re setting into the state.

Here’s a simple example using react-datepicker 4.8.0

import ReactDatePicker from 'react-datepicker'
import { useState } from 'react'
function App() {
  const [startDate, setStartDate] = useState(new Date("2022-05-17"))
  return (
    <div>
      <ReactDatePicker dateFormat="MM-dd-yyyy" selected={startDate} onChange={(val) => setStartDate(val)} />
      <p>current value is {startDate.toString()}</p>
    </div>
  )
}
export default App;

I can’t really understand your code sample — you seem to have 4 separate date variables startDate, orderDate, props.orderDate, and date; orderDate is used before it’s defined; and the one you’re passing as selected isn’t the same one you’re setting into the state.

Here’s a simple example using react-datepicker 4.8.0

import ReactDatePicker from 'react-datepicker'
import { useState } from 'react'
function App() {
  const [startDate, setStartDate] = useState(new Date("2022-05-17"))
  return (
    <div>
      <ReactDatePicker dateFormat="MM-dd-yyyy" selected={startDate} onChange={(val) => setStartDate(val)} />
      <p>current value is {startDate.toString()}</p>
    </div>
  )
}
export default App;

I understand how to use react-datepicker, but the problem is — I’m trying to pass it in date format, but it somehow doesn’t do that. You can watch my repository called test-project for more info(I’ve got so much date states, because i have addInvoice and editInvoice) — https://github.com/stepan-slyvka/test-project

I understand how to use react-datepicker, but the problem is — I’m trying to pass it in date format, but it somehow doesn’t do that. You can watch my repository called test-project for more info(I’ve got so much date states, because i have addInvoice and editInvoice) — https://github.com/stepan-slyvka/test-project

You can see I’m passing in date format in my example and it works OK. if your form is complicated I’d suggest you make a test copy and delete everything except the date picker until you’ve got only the minimum code that replicates the problem. Then if it is a problem with the date picker itself (Which I doubt) you can post the minimum sample here.

I understand how to use react-datepicker, but the problem is — I’m trying to pass it in date format, but it somehow doesn’t do that. You can watch my repository called test-project for more info(I’ve got so much date states, because i have addInvoice and editInvoice) — https://github.com/stepan-slyvka/test-project

You can see I’m passing in date format in my example and it works OK. if your form is complicated I’d suggest you make a test copy and delete everything except the date picker until you’ve got only the minimum code that replicates the problem. Then if it is a problem with the date picker itself (Which I doubt) you can post the minimum sample here.

Okay, thank you.