Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

Question

我正在尝试将所选参数设置为 react-datepicker 的 DatePicker 的默认日期。我从数据库中获取的日期基本上采用以下格式：

event_date: "2019-06-15"

当我设置状态时，日期以这种方式显示 - event_date: "2019-06-15T00:00:00"

我已尝试 new Date() 将其转换为 JavaScript 兼容日期。也试过 MomentJS 但它也抛出同样的错误。当我在 selected 参数中调用 new Date() 时，一切正常。我的意思是，DatePicker 显示默认的今天日期。但是当我尝试将自定义日期值设置为 DatePicker 时，它会抛出错误 - RangeError: Invalid time value.

谁能告诉我DatePicker设置自定义日期需要什么类型的数据？

Answer 1

您的日期似乎是 string 格式。 Datepicker 不接受字符串日期。

您需要使用 parseISO

将字符串日期解析为实际日期

import { parseISO } from 'date-fns'

用法，

parseISO(your_custom_date)

Answer 2

React-datepicker 需要为 startDate 等配置值传递一个 Date 的实例（或者它也可能不包括时间戳整数，不确定）。

您可以使用

new Date(Date.parse("2019-06-15T00:00:00"));

创建日期实例。 Date.parse() 识别许多日期字符串格式并将它们转换为时间戳值，这些值又被 Date() 构造函数接受。

Answer 3

您可以在 Javascript 中使用最新的 date-fns 库并使用下面的格式

import { format, parseISO } from 'date-fns' 

format(parseISO(DateinISOformat), "MMM dd h:m a")

下面的例子 -

format(parseISO('2019-06-15T00:00:00'), "MMM dd h:m a")

Answer 4

这对我有用。

import { format, parseISO } from "date-fns"; 
<div>{format(parseISO(dateofbirth, 'yyyy-MM-dd', new Date()), "do MMM yyy")}</div>

Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

javascript

reactjs

datepicker

momentjs

react-datepicker