时间在 React 中没有正确显示答案

【问题标题】：Time Not Displaying Properly in React时间在 React 中没有正确显示
【发布时间】：2021-03-31 10:37:17
【问题描述】：

我想根据我在useState 中设置的值正确显示时间。它应该显示9:00 AM。为什么是显示Invalid Time Format。

请在此处检查我的代码和框

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <KeyboardTimePicker
    inputVariant="outlined"
    size="small"
    mask="__:__ _M"
    value={format(new Date(selectedTime), "hh:mm:00 a")}
    onChange={handleTimeChange}
    KeyboardButtonProps={{ disabled: true, style: { display: "none" } }}
  />
</MuiPickersUtilsProvider>

【问题讨论】：

您是否有意使用相当旧的 date-fns 版本？
不，他的问题在我的回答里解决了，你可以在他的codeandbox里试试
@ThomasHoffner 我在问 OP 他们是否故意使用旧版本的 date-fns。这个问题与潜在的解决方案无关。
您传递给KeyboardTimePicker 的值需要与 it 期望的格式相匹配，而不是您希望它显示的格式。格式字符串本身很好，错误来自选择器组件，而不是 date-fns。

标签： reactjs ecmascript-6 react-hooks material-ui date-fns

【解决方案1】：

编辑这部分代码：

value={format(new Date(selectedTime), "hh:mm:00 a")}

到这里：

value={format(new Date(selectedTime), "yyyy-MM-dd''HH:mm:ss")}

或者这个：

value={format(new Date(selectedTime), 3)}

它应该可以正常工作，请查看此文档链接： https://date-fns.org/v2.16.1/docs/format

【讨论】：

注意到 OP 使用的是 1.3.13 版本。