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

Questions

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

byMR

March 16, 2022

I am using Material Ui DateTime picker in a form. After submitting the form, I get the following error?:

Invalid Date Format

Image

I am using JSON Server in my react app for saving data.

This is the output Element for the DateTime picker on DOM.

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

This is data on db.json.

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

This is my code for Add date.

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>
);
};

I would appreciate it if you help me. Thanks