Material UI DatePicker组件maxDate属性设置问题

核心步骤：计算60天后的日期 + 正确配置组件 #

首先，要准确计算当前日期往后推60天的日期，避免直接累加导致的月份/年份溢出问题：

// 计算当前日期 + 60天，自动处理月份/年份切换
const getMaxDate = () => {
  const futureDate = new Date();
  futureDate.setDate(futureDate.getDate() + 60);
  return futureDate;
};

MUI v5 组件配置示例 #

如果使用的是 @mui/x-date-pickers（MUI v5 官方推荐的日期选择器包），按以下方式配置：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

function DatePickerWithMaxLimit() {
  const maxAllowedDate = getMaxDate();

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择有效日期"
        maxDate={maxAllowedDate}
        // 可选：如果maxDate未生效，添加该回调强制禁用超出日期
        shouldDisableDate={(date) => date > maxAllowedDate}
      />
    </LocalizationProvider>
  );
}

常见问题排查 #

1. 版本兼容问题：确认你使用的是 @mui/x-date-pickers，旧版 @material-ui/pickers 已废弃，API 存在差异。
2. 日期时间精度问题：如果出现部分日期误判，可统一将日期的时分秒置为0，避免时间差导致的判断错误：

// 标准化日期，去除时分秒影响
const normalizeDate = (date) => {
  const normalized = new Date(date);
  normalized.setHours(0, 0, 0, 0);
  return normalized;
};

// 改写日期计算和禁用判断
const getMaxDate = () => {
  const futureDate = new Date();
  futureDate.setDate(futureDate.getDate() + 60);
  return normalizeDate(futureDate);
};

// 在shouldDisableDate中使用
shouldDisableDate={(date) => normalizeDate(date) > maxAllowedDate}

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