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

【问题标题】：Material-UI datepicker invalid date format issueMaterial-UI datepicker 无效日期格式问题
【发布时间】：2021-12-06 03:29:33
【问题描述】：

我正在使用以下 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 日期加载到值为“2021 年 19 月 10 日”的状态返回到此“上次更改日期”字段时，我收到错误“日期格式无效”并且不明白为什么我最初从这个日期选择器创建了这个日期。

有什么想法我可能做错了吗？

【问题讨论】：

你好 ArthurJ，我可以看看 handleInputChange 的实现吗？
@Jayffe - 我已经包含了handleInputChange 实现
它似乎有效，也许问题出在其他地方：codesandbox.io/s/keen-cache-wlwpx?file=/src/App.js
可能是这样的 "19/10/2021".split('/').reverse().join('-')
解决了你的问题吗？

标签： javascript reactjs datepicker material-ui date-fns

【解决方案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()

【讨论】：

这解决了我的问题。非常感谢您的帮助。