React Datepicker RangeError:时间值无效

Question

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

我的API日期字符串是12.09。2020年

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

在反应2.0版本后，datepicker将不支持date作为字符串，它表示使用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>
  );
}