如何在MUI Datepicker中启用指定日期并禁用其余？不可用minDate/maxDate

核心解决方案是利用MUI Datepicker提供的shouldDisableDate回调属性，通过自定义逻辑判断每个日期是否需要禁用，完全替代minDate/maxDate的功能，同时也能实现类似react-datepicker「include dates」的效果。

实现步骤与代码示例 #

场景1：仅允许当前日期前后7天（连续区间） #

通过日期范围判断，直接在回调中过滤不符合条件的日期：

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

export default function RestrictedDatePicker() {
  const today = dayjs();
  // 计算允许的日期边界：前7天和后7天
  const startRange = today.subtract(7, 'day');
  const endRange = today.add(7, 'day');

  // 自定义禁用逻辑
  const shouldDisableDate = (date) => {
    // 不在范围内的日期返回true（禁用），否则返回false（启用）
    return date.isBefore(startRange) || date.isAfter(endRange);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="仅选前后7天"
        shouldDisableDate={shouldDisableDate}
        value={null}
        onChange={(newValue) => console.log(newValue)}
      />
    </LocalizationProvider>
  );
}

场景2：模拟「include dates」效果（指定允许的日期列表） #

如果需要明确指定允许的日期集合（哪怕是离散日期），可以先生成允许的日期列表，再在回调中判断：

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

export default function IncludedDatesPicker() {
  const today = dayjs();
  // 生成当前前后7天的日期字符串列表（作为允许的日期集合）
  const allowedDates = [];
  for (let i = -7; i <= 7; i++) {
    allowedDates.push(today.add(i, 'day').format('YYYY-MM-DD'));
  }

  const shouldDisableDate = (date) => {
    const currentDateStr = date.format('YYYY-MM-DD');
    // 不在允许列表中的日期禁用
    return !allowedDates.includes(currentDateStr);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="仅选指定日期"
        shouldDisableDate={shouldDisableDate}
        value={null}
        onChange={(newValue) => console.log(newValue)}
      />
    </LocalizationProvider>
  );
}

关键说明 #

• shouldDisableDate是MUI Datepicker的核心控制属性，会对每个渲染的日期执行回调，返回true则禁用该日期，false则启用。
• 确保使用的日期库（如dayjs）与MUI的日期适配器一致，避免日期对象格式不兼容的问题。
• 该方案同样适用于DateTimePicker等其他时间选择组件，仅需调整日期比较的精度（如保留时分秒）。

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