带有 Formik 的 Material UI 选择器，用于日期和时间组件，带有秒数答案

【问题标题】：Material UI Pickers with Formik for both Date and Time components with seconds带有 Formik 的 Material UI 选择器，用于日期和时间组件，带有秒数
【发布时间】：2021-07-14 05:22:39
【问题描述】：

我目前正在与 Formik 一起开发一个需要使用日期和时间选择器的 React 应用程序。我正在使用 Material-UI 构建应用程序，并且一直在查看 Material-UI Pickers https://material-ui-pickers.dev/

由于我是 React/Formik/Material-UI 的新手，我有以下问题：

是否可以将 Material-UI Pickers 与 Formik 一起使用，因为我需要维护用户提供的所有日期/时间的状态？
当涉及到日期和时间的用户输入时，我有一种情况，用户需要同时输入日期和时间，但以 24 小时格式输入，并且还需要包括秒数，即

我追求的格式是：DD/MM/YYYY HH24:MI:SS

Material-UI Pickers 是否可以实现这一点，正如我在演示中看到的那样，我没有看到添加秒数的功能？

我还有另一种情况，用户输入只是一个时间组件，同样是秒，就像我之前的问题一样，即：

HH24:MI:SS

我想我主要关心的是，如何允许用户同时提供秒数 SS，因为这是必需的？

【问题讨论】：

相关：stackoverflow.com/questions/63226519/…, github.com/mui-org/material-ui-pickers/issues/739

标签： javascript reactjs datepicker material-ui formik

【解决方案1】：

最好的方法是分别使用 DatePicker（用于设置日期）和 Timepicker（还提供秒功能以及小时和分钟设置），您可以将 Material UI Pickers 与 Formik 一起使用，我已将其放入沙箱中，你可以参考它来实现

【讨论】：

我去看看再回你
只是有一个问题，希望有可能，但是当我只使用 <TimePicker> 并选择 hour:min:sec 并按 OK 时，针对 Formik 中该字段的值，它也是包括开头的日期部分。对于我的要求，我只想存储没有日期的时间部分。这可能吗？
你能分享一下你得到的日期格式吗？
我选择了所需的时间，在这个例子中，它是：20:45:19，当我按下 OK 时它返回："2021-04-20T10:45:19.838Z" 正如你所看到的，它在今天的日期之前，但我只想要时间.我也不确定返回的时间是否真的是20:45:19
这是标准日期格式，您可以使用此函数获取小时、分钟和秒数var hours = new Date("2021-04-20T10:45:19.838Z"). getHours var minutes = new Date("2021-04-20T10:45:19.838Z"). getMinutes var seconds=new Date("2021-04-20T10:45:19.838Z"). getSeconds