React Datepicker RangeError: Invalid time value

Question

My datepicker is throwing RangeError: Invalid time value while trying to set selected date value which i am getting from API as string value.

My API date string is 12.09.2020

<DatePicker dateFormat="dd/MM/yyyy" selected={currentFuelPrice.date_of_sale} onChange={date => setStartDate(date)} />

After react 2.0 version, datepicker wont support date as string, it said to use date-fns parseiso...

import { parseISO } from 'date-fns'; 

currentFuelPrice.date_of_sale = parseISO(response.data.date_of_sale, 1);

after adding parseISO, i am still getting error RangeError: Invalid time value

Which version are you using ?

Ozan Manav
– Ozan Manav

2020-09-14 06:34:27 +00:00
Commented Sep 14, 2020 at 6:34 — Ozan Manav
– Ozan Manav, Commented Sep 14, 2020 at 6:34
Which version of DatePicker are you using ?

Ahmad MOUSSA
– Ahmad MOUSSA

2020-09-14 06:36:22 +00:00
Commented Sep 14, 2020 at 6:36 — Ahmad MOUSSA
– Ahmad MOUSSA, Commented Sep 14, 2020 at 6:36
react version 16.13.1

pappu_kutty
– pappu_kutty

2020-09-14 06:37:06 +00:00
Commented Sep 14, 2020 at 6:37 — pappu_kutty
– pappu_kutty, Commented Sep 14, 2020 at 6:37
datepicker 3.1.3

pappu_kutty
– pappu_kutty

2020-09-14 06:39:20 +00:00
Commented Sep 14, 2020 at 6:39 — pappu_kutty
– pappu_kutty, Commented Sep 14, 2020 at 6:39
did you do this: selected={Date.parse('12/09/2020')} ?

Ahmad MOUSSA
– Ahmad MOUSSA

2020-09-14 06:40:30 +00:00
Commented Sep 14, 2020 at 6:40 — Ahmad MOUSSA
– Ahmad MOUSSA, Commented Sep 14, 2020 at 6:40

Ozan Manav · Accepted Answer · 2020-09-14 06:43:39Z

2

You can use parse method to achieve your goal. It's accepting date string, format and reference date. Here you can use like this:

Codesandbox: https://codesandbox.io/s/heuristic-feynman-k75i4?file=/src/App.js:0-639

import React, { useState } from "react";
import "./styles.css";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { parse } from "date-fns";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className="App">
      <DatePicker
        dateFormat="dd/MM/yyyy"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
      />
      <button
        onClick={() =>
          setStartDate(parse("12.09.2020", "dd.MM.yyyy", new Date()))
        }
      >
        Set Api DATE
      </button>
    </div>
  );
}

answered Sep 14, 2020 at 6:43

Ozan Manav

4394 silver badges18 bronze badges

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

1 Comment

pappu_kutty Over a year ago

it is working perfectly. after adding parse method..it was my mistake not added startdate to datepicker as selected value..

Collectives™ on Stack Overflow

React Datepicker RangeError: Invalid time value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related