CODEWITHSUNDEEP
reactjsdatepickerreact-datepicker
sah
sah

Reputation: 165

React datepicker - invalid time value

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.

Upvotes: 5

Views: 12541

Answers (2)

Elizabeth Bradley
Elizabeth Bradley

Reputation: 741

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}

Upvotes: 4

Will Jenkins
Will Jenkins

Reputation: 9787

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.

Upvotes: 7

Related Questions