Material-UI KeyboardDatePicker 加载格式化日期字符串时出现无效日期格式问题排查

这个问题的核心原因很明确：Material-UI的KeyboardDatePicker组件要求value属性必须是Date对象（或null），但你传入的是字符串格式的日期（比如"19/10/2021"），组件无法直接解析这个字符串为有效的日期对象，所以抛出了"Invalid date format"错误。

为什么会出现这个情况？ #

你通过DatePicker创建日期时，onChange传递给handleInputChange的是一个Date对象，此时你的表单状态中存储的是Date类型的值。但后续可能在保存到后端、重新加载数据时，把这个Date对象转换成了字符串格式（比如"19/10/2021"），再直接把字符串传入DatePicker组件，就会触发格式错误。

解决方案 #

有两种常用的修复方式，你可以根据自己的业务场景选择：

方案1：在表单初始化时将字符串日期转为Date对象

如果你是从后端获取到字符串格式的日期，可以在设置initialFValues时，先把日期字符串转换成Date对象：

// 假设从后端获取的数据是response.data
import { parse } from 'date-fns';

const initialValues = {
  // 其他字段...
  last_changed: response.data.last_changed ? parse(response.data.last_changed, 'dd/MM/yyyy', new Date()) : null
};

// 然后将initialValues传入useForm
const { values, handleInputChange } = useForm(initialValues);

方案2：在自定义DatePicker组件内部自动处理字符串输入

为了让组件更健壮，你可以在自定义DatePicker里加入对字符串格式value的自动转换逻辑，这样不管传入的是Date对象还是符合格式的字符串，组件都能正常工作：
修改你的自定义DatePicker组件：

import React from 'react'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { parse } from 'date-fns'; // 导入parse方法

export default function DatePicker(props) {
  const { name, label, value, onChange } = props
  const convertToDefEventPara = (name, value) => ({ target: { name, value } })

  // 处理传入的value：如果是字符串，转换成Date对象；如果是Date/null则直接使用
  const processedValue = typeof value === 'string' 
    ? parse(value, 'dd/MM/yyyy', new Date()) 
    : value || null; // 处理undefined的情况

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        inputVariant="outlined"
        label={label}
        format="dd/MM/yyyy"
        placeholder="DD/MM/YYYY"
        name={name}
        value={processedValue}
        onChange={date => onChange(convertToDefEventPara(name, date))}
        // 可选：如果转换失败，显示空值而不是报错
        invalidDateMessage=""
      />
    </MuiPickersUtilsProvider>
  )
}

额外注意点 #

• 如果你的表单提交时需要把Date对象转成字符串格式（比如传给后端），不要在handleInputChange里处理，应该在提交表单的函数中统一转换：

import { format } from 'date-fns';

const handleSubmit = () => {
  const submitData = {
    ...values,
    last_changed: values.last_changed ? format(values.last_changed, 'dd/MM/yyyy') : null
  };
  // 然后提交submitData到后端
};

• 你代码里导入了moment但没有使用，如果不需要的话可以删掉，避免不必要的依赖。

内容的提问来源于stack exchange，提问作者ArthurJ