Material-UI datepicker无效日期格式问题
Material-UI datepicker invalid date format issue
我正在使用以下 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”的状态返回到“上次更改日期”字段时,我收到错误“无效日期格式”并且不明白为什么我最初从这个日期选择器创建这个日期。
知道我可能做错了什么吗?
您需要将日期转换为 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()
我正在使用以下 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”的状态返回到“上次更改日期”字段时,我收到错误“无效日期格式”并且不明白为什么我最初从这个日期选择器创建这个日期。
知道我可能做错了什么吗?
您需要将日期转换为 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()