CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-datepicker
Hilarius Andriano
Hilarius Andriano

Reputation: 99

Reactjs Hook onChange with react-datepicker, invalid time value error

im new to react hooks and i tried to convert react-datepicker from class to function with hooks. The problem is when i trigger the onChange will show (RangeError: Invalid time value), but default "selected" start date is rendering fine. Can this be done with hooks?

 import React, { useState, Fragment } from 'react';
 import Datepicker from 'react-datepicker';

 const Example = () => {

 const [startDate, setStartDate] = useState(new Date());

 const handleChange = date => {
   setStartDate({ startDate: date });
  }

 return (
   <Fragment>
    <Datepicker
     selected={startDate}
     onChange={handleChange}
    />
   </Fragment>
 )
}

export default Example;

i expect the startDate state is changed without "RangeError: Invalid time value".

Upvotes: 1

Views: 5503

Answers (2)

Khizer Choudhry
Khizer Choudhry

Reputation: 21

I have used it in my project as reusable component

    return (
      <DatePicker
        fixedHeight
        showFullMonthYearPicker
        showDisabledMonthNavigation
        selected={selectedDate}
        value={valueDate}
        onChange={(day) => onChange && onChange(day, flag)}
        className="react-datepicker__input-container-days"
      />
    );
  };

This is where im calling my component

{renderDateDay({       
          flag: 0,
                                valueDate: manuFucturedValue.day,
                                selectedDate:
                                  (manuFucturedValue.day &&
                                    new Date(manuFucturedValue.day)) ||
                                  null,
                                onChange: (day) =>
                                  handleDateOnchange(day, "day", 0),

Upvotes: 0

FunkeyFlo
FunkeyFlo

Reputation: 295

The problem is that you are not inserting a date into the state but an object rather.

change:

setStartDate({ startDate: date });

to:

setStartDate(date);

Upvotes: 3

Related Questions