React Datepicker RangeError: Invalid time value

Question

我的日期选择器在尝试将我从 API 获取的选定日期值设置为字符串值时抛出 RangeError: Invalid time value。

我的 API 日期字符串是 12.09.2020

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

react 2.0版本后，datepicker不再支持date as string，据说可以使用date-fns parseiso...

import { parseISO } from 'date-fns'; 

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

添加 parseISO 后，我仍然收到错误 RangeError: Invalid time value

Answer 1

您可以使用解析方法来实现您的目标。它接受日期字符串、格式和参考日期。在这里你可以这样使用：

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>
  );
}

React Datepicker RangeError: Invalid time value

React Datepicker RangeError: Invalid time value

reactjs

react-datepicker