抛出错误 RangeError：将自定义日期设置为 react-datepicker 的 DatePicker 时时间值无效

Posted 2023-05-07

【中文标题】抛出错误 RangeError：将自定义日期设置为 react-datepicker 的 DatePicker 时时间值无效

【英文标题】：Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

【发布时间】：2019-12-26 21:03:15

【问题描述】：

我正在尝试将所选参数设置为 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 设置自定义日期需要什么类型的数据？

【参考方案1】：

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

您需要使用parseISO将字符串日期解析为实际日期

import  parseISO  from 'date-fns' 

用法，

parseISO(your_custom_date)

【讨论】：

我认为仅仅为了一个可以用 vanilla JS 方法实现的目的而导入一些东西是不必要的开销。

@ravibagul91 它仍然没有工作。它仍然显示相同的错误。

您的代码运行良好，但您没有在演示中将 'DD/MM/YYYY' 传递给 format() 函数。下面是你的代码items[i].event_date = moment(this.state.eventList[i].event_date).format(); 下面是我的代码items[i].event_date = moment(this.state.eventList[i].event_date).format('DD/MM/YYYY'); 检查我已经编辑了你的代码...它抛出了错误。

是的。我没有通过格式，因为 Datepicker 需要格式为 2019-06-15T00:00:00 的日期（带时间的日期）并执行 `moment(this.state.eventList[i].event_date).format('DD/MM/YYYY')`只会给出日期而不是时间，所以时间错误。

可以直接避开updateAllDates函数。因为来自 DB 的日期格式正确，但它是一个字符串，您只需将该字符串日期解析为实际日期。

【参考方案2】：

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

你可以使用

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

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

【讨论】：

谢谢。它工作得很好。但是我有问题，当我尝试使用从momentjs转换而来的Date.parse()解析值时，它会抛出RangeError: Invalid time value。我已关注this answer - 成功调用 API。但它仅适用于单个索引 0。我需要使用状态而不是单个索引吗？

你能举一个使用 Date.parse() 失败的值的例子吗？

失败的值是 DD/MM/YYYY 的格式，例如22/08/2019

问题是我可以用momentjs 转换日期，或者我可以用Date.parse() 转换日期。我无法同时转换两个日期。会有什么问题？

您在问题中展示了一个示例日期字符串格式，但从未提及您正在处理各种格式。我的回答在这方面是有效的。

【参考方案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") 

【参考方案4】：

这对我有用。

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