Formik结合Material UI日期选择器时new Date初始值触发报错

报错Uncaught TypeError: date.isBefore is not a function的核心原因是：你使用AdapterDayjs作为Material UI DatePicker的日期适配器，该适配器要求组件的value必须是dayjs对象，但你设置的初始值是原生Date对象——原生Date没有isBefore方法（这是dayjs的实例方法），组件内部调用该方法时自然抛出错误。

解决步骤： #

1. 确保已安装dayjs依赖（未安装的话，执行npm install dayjs或yarn add dayjs）
2. 导入dayjs库
3. 将Formik的初始值从new Date()替换为dayjs()
4. 确认DatePicker的value和onChange传递的都是dayjs对象（配合AdapterDayjs时，DatePicker的onChange返回值本身就是dayjs对象，无需额外转换）

修改后的完整代码示例： #

import dayjs from 'dayjs';
import { useFormik } from 'formik';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import TextField from '@mui/material/TextField';

// ...其他业务代码

const formik = useFormik({
  initialValues: {
    dob: dayjs() // 替换为dayjs实例
  }
});

// ...渲染部分
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    name="dob"
    id="dob"
    variant="standard"
    label="dob"
    value={formik.values.dob}
    renderInput={(params) => (
      <TextField {...params} />
    )}
    onChange={(value) => formik.setFieldValue('dob', value, true)}
    error={!!(formik.touched.dob && formik.errors.dob)}
    helperText={formik.touched.dob && formik.errors.dob}
  />
</LocalizationProvider>

补充说明： #

如果后续需要将dayjs对象转换为原生Date对象提交给后端，可调用formik.values.dob.toDate()方法，dayjs提供了便捷的转换API。

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