React中MUI DatePicker与Formik集成报错：date.isBefore is not a function

错误原因 #

• 你使用AdapterDayjs作为MUI DatePicker的日期适配器，它要求传入的value必须是dayjs实例，但初始值Date.now()返回的是数字类型的时间戳，不具备isBefore方法。
• Formik默认的handleChange无法自动将DatePicker的输出转换为dayjs对象，导致组件内部校验时调用方法失败。

修复步骤 #

1. 替换初始值为dayjs对象
   安装dayjs依赖后，用dayjs()生成符合要求的初始日期值，替代Date.now()。

2. 手动处理DatePicker的 onChange 事件
   使用Formik的setFieldValue方法，将DatePicker选中的dayjs对象同步到Formik的values中，确保数据类型一致。

3. 确认Yup校验兼容性
   Yup的date()校验规则默认支持dayjs对象（因为dayjs实现了标准Date的接口），无需额外修改校验Schema。

完整代码示例 #

首先确保安装依赖：

npm install dayjs @mui/x-date-pickers

修改后的代码：

import dayjs from 'dayjs';
import { Formik } from 'formik';
import * as yup from 'yup';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Box } from '@mui/material';

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  project_name: yup.string().required("required"),
  usersId: yup.string(),
  partnerId: yup.string(),
  categoryId: yup.string(),
});

const initialValuesProject = {
  project_start: dayjs(),
  project_end: dayjs(),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};

// 假设handleFormSubmit已定义
const handleFormSubmit = (values) => {
  // 提交逻辑，values中的project_start和project_end是dayjs对象，可按需转换
  console.log(values);
};

// 表单组件
const ProjectForm = () => (
  <Formik
    onSubmit={handleFormSubmit}
    initialValues={initialValuesProject}
    validationSchema={projectSchema}
  >
    {({ values, handleSubmit, setFieldValue }) => (
      <form onSubmit={handleSubmit}>
        <Box width="50%">
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              id="project_start"
              name="project_start"
              value={values.project_start}
              onChange={(newValue) => setFieldValue('project_start', newValue)}
              slotProps={{
                textField: {
                  size: "small",
                  margin: "dense",
                },
              }}
            />
            <DatePicker
              id="project_end"
              name="project_end"
              value={values.project_end}
              onChange={(newValue) => setFieldValue('project_end', newValue)}
              slotProps={{
                textField: { size: "small", margin: "dense" },
              }}
            />
          </LocalizationProvider>
        </Box>
        {/* 其他表单字段和提交按钮 */}
      </form>
    )}
  </Formik>
);

export default ProjectForm;

额外说明 #

如果需要在提交时将dayjs对象转换为时间戳或字符串，可在handleFormSubmit中处理：

const handleFormSubmit = (values) => {
  const submitData = {
    ...values,
    project_start: values.project_start.valueOf(), // 转时间戳
    project_end: values.project_end.format('YYYY-MM-DD') // 转日期字符串
  };
  // 提交submitData
};

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