MUI DatePicker年月视图下disablePast/disableFuture灰化失效问题

问题根因 #

MUI的DatePicker在设置views={['year', 'month']}时，disableFuture/disablePast属性不会自动生效——这不是功能限制，而是因为这两个属性是针对**完整日期（包含日）**设计的判断逻辑。而年月视图的禁用维度是年份/月份，和完整日期的判断逻辑不匹配，因此组件没有默认复用这两个属性。

解决方法 #

需要通过shouldDisableYear和shouldDisableMonth两个回调函数，针对年月维度自定义禁用逻辑，这是官方推荐的精准控制方式。

示例代码（基于dayjs适配器） #

import { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

const YearMonthPicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const currentDate = dayjs();

  // 禁用当前年份之后的所有年份
  const disableFutureYears = (year) => year.year > currentDate.year();

  // 禁用当前年月之后的所有月份
  const disableFutureMonths = (month) => {
    const targetMonth = dayjs().year(month.year).month(month.month);
    return targetMonth.isAfter(currentDate, 'month');
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择年月"
        views={['year', 'month']}
        value={selectedDate}
        onChange={setSelectedDate}
        shouldDisableYear={disableFutureYears}
        shouldDisableMonth={disableFutureMonths}
      />
    </LocalizationProvider>
  );
};

export default YearMonthPicker;

如果需要禁用过去的年月，只需要把判断逻辑反转：

• 禁用过去年份：return year.year < currentDate.year();
• 禁用过去月份：return targetMonth.isBefore(currentDate, 'month');

补充说明 #

完整日期视图（含日）中disableFuture/disablePast生效，是因为组件内部自动将这两个属性转化为了针对完整日期的禁用判断。而年月视图需要更明确的维度控制，因此官方没有做自动映射，而是交给开发者通过回调自定义逻辑，避免歧义（比如disableFuture在年月视图中，到底是禁用当前月之后的月份，还是当前年之后的年份？）。

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