Material UI DateCalendar设置defaultValue致应用崩溃求助（TypeScript）

云上老周

2026-7-27

解决Material UI DateCalendar在TypeScript中使用moment/defaultValue崩溃的问题

问题根源

MUI X的日期组件默认基于原生Date对象工作，直接传入moment实例会因为缺少对应日期适配器导致组件无法识别日期格式，进而引发运行时崩溃。官方文档提到支持moment是需要额外配置适配器的，并非开箱即用。

具体修复步骤

1. 确认依赖安装

确保已安装必要的依赖包：

npm install @mui/x-date-pickers moment
# 或使用yarn
yarn add @mui/x-date-pickers moment

2. 配置日期适配器

用LocalizationProvider包裹DateCalendar组件，指定使用MomentAdapter，让组件能够识别moment实例：

import { DateCalendar, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import moment from 'moment';
import { useState } from 'react';

const YourComponent = () => {
  const [currentDate, setCurrentDate] = useState<moment.Moment | null>(moment());
  const [selectedDate, setSelectedDate] = useState<moment.Moment | null>(moment());

  const handleDateChange = (newDate: moment.Moment | null) => {
    setSelectedDate(newDate);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DateCalendar
        disablePast={true}
        defaultValue={currentDate}
        onChange={handleDateChange}
      />
    </LocalizationProvider>
  );
};

export default YourComponent;

3. 修正类型与逻辑优化

配置适配器后，onChange回调的参数直接是moment.Moment | null类型，无需手动用moment(newDate)转换，避免类型冗余与潜在错误。
初始化currentDate时建议传入有效的moment实例（如moment()）而非null，避免组件初始化时因空值引发异常。