Material UI（日期时间选择器）：提交后日期格式消息无效

Question

我在表单中使用 Material Ui DateTime 选择器。提交表单后，出现以下错误：

Invalid Date Format

Image

我在我的 React 应用程序中使用 JSON 服务器来保存数据。

这是 DOM 上日期时间选择器的输出元素。

<input aria-invalid="false" readonly="" type="text" class="MuiInputBase-input MuiInput-input" value="March 16th 08:50 a.m.">

这是 db.json 上的数据。

{
  "text": "study",
  "day": "2022-03-16T05:20:00.000Z",
  "reminder": true,
  "id": 1
}

这是我的添加日期代码。

import { useState } from "react";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import "date-fns";
import { DateTimePicker } from "@material-ui/pickers";

const AddTask = ({ onAdd }) => {

const [day, setDay] = useState(new Date());

const onSubmit = (e) => {
  e.preventDefault();

  onAdd({ day });
  setDay("");
};
return (
<form className="add-form" onSubmit={onSubmit}>
 <div className="form-control">
    <label>Day & time</label>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        disableToolbar
        variant="inline"
        value={day}
        onChange={(day) => {
          setDay(day);
        }}
        autoOk
      />
    </MuiPickersUtilsProvider>
  </div>
</form>
);
};

如果你能帮助我，我将不胜感激。谢谢

Answer 1

如果您从 onSubmit 中删除 setDay(""); 行，它可能不会中断。为什么你需要它？

Material UI（日期时间选择器）：提交后日期格式消息无效

Material UI (dateTime picker) : Invalid Date Format message after submission

javascript

datetime

jsx

reactjs

material-ui