解决Day.js结合Material-UI DatePicker的TypeScript类型不匹配错误

问题根源 #

当使用AdapterDayjs作为日期适配器时，MUI的DatePicker组件内部期望所有日期相关属性（包括minDate、maxDate、onChange的参数）都是Dayjs类型，而非原生Date类型。你的错误来自两个核心问题：

• TypeScript错误：接口定义中onChange参数标注为Date | null，但组件实际接收Dayjs | null，同时minDate/maxDate传入Dayjs对象后被TypeScript按Date类型校验
• 运行时错误：强行用toDate()转成原生Date后，适配器无法识别该类型——Date没有Dayjs的isAfter等实例方法，导致内部逻辑报错

解决方案 #

1. 修正类型定义与组件逻辑

将组件的日期相关类型统一为Dayjs，如果父组件需要原生Date，仅在onChange回调内部做转换即可，不要直接给DatePicker传Date对象。

2. 完整修正代码

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs, { Dayjs } from "dayjs";

// 方案1：组件内部用Dayjs类型，父组件也接收Dayjs
interface DatepickerProperties {
  label: string;
  onChange: (value: Dayjs | null) => void;
  disablePast?: boolean;
}

// 方案2：父组件必须接收Date类型，接口保留Date，内部转换
// interface DatepickerProperties {
//   label: string;
//   onChange: (value: Date | null) => void;
//   disablePast?: boolean;
// }

function Datepicker({
  label,
  onChange,
  disablePast = false,
}: DatepickerProperties) {
  // 若用方案2，在这里把Dayjs转成Date再传给父组件
  const handleChange = (value: Dayjs | null) => {
    onChange(value ? value.toDate() : null);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        disablePast={disablePast}
        label={label}
        // 根据方案选择直接传onChange（方案1）或handleChange（方案2）
        onChange={handleChange}
        // 直接传入Dayjs对象，TypeScript会自动匹配适配器对应的类型
        minDate={dayjs()}
        maxDate={dayjs("9999-12-31")}
      />
    </LocalizationProvider>
  );
}

3. 关键注意事项

• 使用AdapterDayjs时，DatePicker的所有日期属性类型会自动适配为Dayjs，无需手动转换为原生Date
• 若TypeScript仍报类型错误，确保已安装@types/dayjs（TypeScript环境必备）
• 不要混合传递Dayjs和Date对象给DatePicker，会导致适配器逻辑混乱

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