React datepicker - invalid time value

Question

I am trying to create a React-datepicker; however, I am getting this error:

RangeError: Invalid Time Value

I added a dateFormat to match my date variable; however, I am still getting the same error?

What am I doing wrong?

import DatePicker from "react-datepicker";

let date = moment(dateString).format('MMMM d, YYYY h:mm a'); // January 3, 2019 12:30 pm

<DatePicker
    selected={date}
    onChange={this.handleInputChange}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="MMMM d, YYYY h:mm a"
    timeCaption="time"
/>

I have tried dateFormat="MMMM d, yyyy h:mm aa" as well.

Will Jenkins · Accepted Answer · 2019-07-18 16:16:29Z

7

A DatePicker expects a Date, not a moment. You have to convert it first:

let date = moment(dateString).toDate();

From the DatePicker docs:

Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using native Date objects to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

answered Jul 18, 2019 at 16:16

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sah Over a year ago

Thank you. That was the exact problem I was having!

Elizabeth Bradley · Accepted Answer · 2020-05-27 19:14:42Z

4

In my case the issue involved checking whether the Date was null after pulling the Date in ISO format from the database.

 <DatePicker selected={initiated_Date ? new Date(initiated_Date) : null}

answered May 27, 2020 at 19:14

Elizabeth Bradley

7511 gold badge6 silver badges5 bronze badges

Collectives™ on Stack Overflow

React datepicker - invalid time value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest