时间戳格式不支持 React `react-datepicker` 作为默认值答案

【问题标题】：Timestamp format is not supporting the React `react-datepicker` as default value时间戳格式不支持 React `react-datepicker` 作为默认值
【发布时间】：2020-04-19 03:18:11
【问题描述】：

我的 api 结果中的日期时间格式是2019-12-30T06:16:48.453Z。 react-datepicker 不支持它。

我的代码如下并且是一个功能组件。我没有写下面的完整代码。只添加了所需的部分。

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

<DatePicker
    selected={'2019-12-30T06:16:48.453Z'}
    {...props}
/>

我还尝试通过导入添加moment 并将其用作selected={moment('2019-12-30T06:16:48.453Z')}

在Maximum update depth exceeded 这样的两种情况下我都会收到错误消息。

【问题讨论】：

当你给 selected={moment('2019-12-30')} 是否有效？没有时间
不，同样的错误。
此错误 - 超出最大更新深度 - 与您的反应应用程序中的无限循环有关。您有某个逻辑正在更新组件，更新的组件正在触发新的更新等等，等等。你应该首先尝试解决这个问题
我正在使用类似于 Redux-Form 的 Formik 库，并且不再以我自己的方式进行更新。
@Hareesh 所选道具接受对象而不是字符串，因此您需要使用本机日期对其进行转换。添加了答案，请检查并让我知道您是否需要对此进行进一步说明

标签： reactjs react-datepicker

【解决方案1】：

他们使用的仍然是 1.8 版的 react datepicker，以减少他们使用本机日期对象的包大小。 reference

所以你可以更新你的代码，如下所示

 function App() {
  return (
    <div className="App">
      <DatePicker selected={new Date("2019-12-30")} />
      <DatePicker selected={new Date("2019-12-30T06:16:48.453Z")} />
    </div>
  );
}

工作codesandbox

更新

为了获得所需的格式，react datepicker 有一个名为 dateFormat 的 prop，所以你可以像这样添加 dateFormat="dd/MM/yyyy"，参见 here

【讨论】：

这个工作但格式不工作dateFormat={'dd-MM-yyyy} 并显示默认格式。通过从日期选择器中选择日期更改时，此方法有效。
@Hareesh 基本上你需要将它转换为原生日期所需的格式，我认为这会起作用，正如问题中提到的那样，以该格式添加了答案，所以基本上你想在 dd- 中显示它mm-yyyy 格式，我说的对吗

【解决方案2】：

超过最大更新深度

当您在 render 方法返回中的函数调用超出限制时，会发生此错误。您可以检查组件内的任何其他函数调用吗？

对于

反应日期选择器

尝试基本的 JavaScript 日期 API。

selected={new Date('2019-12-30T06:16:48.453Z')}

这应该可以工作

【讨论】：

【解决方案3】：

 const datee='2019-12-30T06:16:48.453Z';
 let filt = Date(datee);
 console.log(filt);
 document.write(filt);

【讨论】：

【解决方案4】：

这个关于无限循环的错误。你可以检查这个问题：ReactJS: Maximum update depth exceeded error 您还可以在 DatePicker 组件中设置 dateFormat，例如： dateFormat="MMMM d, yyyy h:mm aa" 检查格式：https://reactdatepicker.com/

【讨论】：