Material-UI datepicker invalid date format

Viewed 359

I have a form which containts material ui KeyboardDatePicker . As a default value of KeyboardDatePicker I want to use start_date from the next json object:

title: "new"
start_date: "2022-01-15T14:25:30Z"
author: 1
end_date: "2022-01-15T14:25:31Z"
id: 1
reg_end_date: "2022-01-15T14:25:36Z"
reg_start_date: "2022-01-15T14:25:33Z"
status: 2

here is my implementation:

const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);

        axiosInstance.put(`admin/edit/` + id + '/', {
            title: formData.title,
            slug: formData.slug,
            author: 1,
            description: formData.description,
            start_date:formData.start_date
        });
        history.push({
            pathname: '/admin/',
        });
        window.location.reload();
    };

    const classes = useStyles(); 
    const [selectedDate, setSelectedDate] = useState(new Date(formData.start_date));
    const handleDateChange = (date) => {
    console.log(date);
    setSelectedDate(date);
  };


return (
        <Container component="main" maxWidth="sm">
            <CssBaseline />
            <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Edit 
                </Typography>
                <form className={classes.form} noValidate>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                     <MuiPickersUtilsProvider utils={DateFnsUtils}>
                        <KeyboardDatePicker
                        label="Material Date Picker"
                        value={selectedDate}
                        onChange={handleDateChange}/>
                     </MuiPickersUtilsProvider>
                        </Grid>
                     </form>
                 </div>
           </Container>
         );

I get this error : enter image description here

but if I hardcode start_date, everything works fine:

const [selectedDate, setSelectedDate] = useState(new Date("2022-01-15T14:25:30Z"));

enter image description here

What is the problem and how I can solve it? Thank you

0 Answers
Related