如何正确地将在 React 中以状态传递的 Date 对象放入 datepicker？答案

【问题标题】：How to correctly take a Date object passed with state in React into datepicker?如何正确地将在 React 中以状态传递的 Date 对象放入 datepicker？
【发布时间】：2020-02-14 15:04:54
【问题描述】：

我将 DatePicker 与我的 react 应用程序一起使用。我通过 location.state 将一个包含日期字段的对象从一个组件传递到另一个组件。这是一个编辑组件，我可以在其中更改这些字段的值。但是控制台发誓无效时间异常。我读到我应该用 parseISO 做点什么，但它仍然什么也没做。如何正确使用它？（设置是 this.state 字段）

...
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import { parseISO, format } from 'date-fns'
...

            <DatePicker
              name="saleDateFrom"
              selected={parseISO(settings.saleDateFrom)}
              onChange={this.handleChangeFrom}
              dateFormat="MMMM dd, yyyy hh:mm:ss aa"
            />

【问题讨论】：

标签： javascript reactjs parsing datepicker timestamp

【解决方案1】：

您可以使用Date.parse(settings.saleDateFrom) 获取自纪元以来的时间。

如果您需要它作为数据对象。

new Date(Date.parse(settings.saleDateFrom))

【讨论】：

【解决方案2】：

   <DatePicker
          name="saleDateFrom"
          selected={new Date(settings.saleDateFrom)}
          onChange={this.handleChangeFrom}
          dateFormat="MMMM dd, yyyy hh:mm:ss aa"
        />

这将解决您的问题。 react-datepicker 期望日期为 javascript Date 对象

【讨论】：