Material-UI datepicker无效日期格式问题

Question

我使用以下Material-UI日期拾取器库:

import React from 'react'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import moment from 'moment';
export default function DatePicker(props) {

const { name, label, value, onChange } = props


const convertToDefEventPara = (name, value) => ({
target: {
name, value
}
})

return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker disableToolbar variant="inline" inputVariant="outlined"
label={label}
format="dd/MM/yyyy"
placeholder="DD/MM/YYYY"
name={name}
value={value}
onChange={date =>onChange(convertToDefEventPara(name,date))}                

/>
</MuiPickersUtilsProvider>
)
}

这是useFrom中存在的handleInputChange实现，我在下面的组件中使用DatePicker

import React, { useState } from 'react'
import { makeStyles } from "@material-ui/core";

export function useForm(initialFValues, validateOnChange = false, validate) {


const [values, setValues] = useState(initialFValues);
const [errors, setErrors] = useState({});

const handleInputChange = e => {
const { name, value } = e.target
setValues({
...values,
[name]: value
})
if (validateOnChange)
validate({ [name]: value })
}

const resetForm = () => {
setValues(initialFValues);
setErrors({})
}


return {
values,
setValues,
errors,
setErrors,
handleInputChange,
resetForm

}
}

const useStyles = makeStyles(theme => ({
root: {
'& .MuiFormControl-root': {
width: '80%',
margin: theme.spacing(1)
}
}
}))
export function Form(props) {
const classes = useStyles();
const { children, ...other } = props;
return (
<form className={classes.root} autoComplete="off" {...other}>
{props.children}
</form>
)
}

在我的实际组件中，我使用DatePicker如下:

<DatePicker
name="last_changed"
label="Date last changed"                        
value={values.last_changed}                        
onChange={handleInputChange}
/> 

我的问题是，当我将last_changed日期加载到值为"19/10/2021"的状态时回到这个"最后更改日期"。字段中，我收到错误"无效日期格式"。我不明白为什么我最初创建这个日期，从这个日期选择器。

你知道我做错了什么吗?

Answer 1

你需要将你的日期转换为js日期字符串，然后通过使用date toString()最终发送到你的material-ui组件

如果您收到的日期格式为'19/10/2021'也许你可以这样做

const receivedDate = '19/10/2019';
const formatedDate = receivedDate.split('/').reverse().join('-');
const textDate = new Date(formatedDate).toString()