求@material-ui/pickers Calendar API使用经验及实现指导

我之前也踩过这个组件的坑，文档确实过于简洁，连基础示例都没有，折腾了好一阵才跑起来！给你整理几个关键要点和可运行的示例，帮你解决问题：

第一步：确认依赖安装完整 #

@material-ui/pickers的MomentUtils依赖@date-io/moment包，很多人会漏装这个导致报错。根据你的pickers版本安装对应版本的依赖：

• 如果是@material-ui/pickers v3.x：安装@date-io/moment@1.x.x
• 如果是@material-ui/pickers v4.x：安装@date-io/moment@2.x.x

执行安装命令（以v3为例）：

npm install @material-ui/pickers moment @date-io/moment@1.3.13

第二步：确保state初始值为moment实例 #

Calendar组件的date属性要求必须是moment对象，如果你的初始值是字符串、null或者其他类型，会直接触发错误。正确的state初始化方式：

const [calendarDate, setCalendarDate] = React.useState(moment());

完整可运行示例代码 #

下面是一个最小化的可用示例，包含基础配置和常用的props：

import React from 'react';
import { MuiPickersUtilsProvider, Calendar } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import moment from 'moment';

const CustomCalendar = () => {
  const [calendarDate, setCalendarDate] = React.useState(moment());

  const handleDateChange = (selectedDate) => {
    // selectedDate是moment对象，可直接调用moment的方法处理
    setCalendarDate(selectedDate);
    console.log('选中的日期：', selectedDate.format('YYYY-MM-DD'));
  };

  return (
    <MuiPickersUtilsProvider 
      utils={MomentUtils} 
      locale="en"
      // 如果需要中文locale，记得先导入moment的中文包：import 'moment/locale/zh-cn'; 然后locale设为'zh-cn'
    >
      <Calendar
        date={calendarDate}
        onChange={handleDateChange}
        // 可选：禁用过去的日期
        disablePast
        // 可选：设置默认显示的月份（如果和选中日期不同）
        // defaultMonth={moment('2024-06')}
        // 可选：自定义日期单元格内容
        renderDay={(day, selectedDate, isInCurrentMonth) => {
          return (
            <div>{day.format('DD')}</div>
          );
        }}
      />
    </MuiPickersUtilsProvider>
  );
};

export default CustomCalendar;

常见错误排查 #

• "Cannot read property 'xxx' of undefined"：大概率是date属性不是moment对象，检查state初始值和onChange中传入的参数是否被正确处理。
• "utils is not provided"：确保MuiPickersUtilsProvider正确包裹了Calendar组件，并且传入了utils={MomentUtils}属性。
• 版本不兼容报错：重点检查@date-io/moment的版本是否和@material-ui/pickers匹配，版本不对应会导致各种奇怪的工具类错误。

如果还有具体的错误信息，可以把错误栈贴出来，我再帮你针对性分析！

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