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.

score 7 · Accepted Answer · answered Jul 18 '19 at 16:16

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 '19 at 16:16

Will Jenkins

9,507
1
27
46

Thank you. That was the exact problem I was having! – sah Jul 18 '19 at 17:37

score 3 · Answer 2 · answered May 27 '20 at 19:14

3

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 '20 at 19:14

Elizabeth Bradley

671
1
6
5

React datepicker - invalid time value

2 Answers2