如何在Material UI Date TextField中禁用起止日期间的指定日期？

原生HTML的type="date"输入框（包括Material UI基于它封装的TextField）仅支持通过min和max属性限制日期范围，无法单独禁用范围内的特定日期。要实现这个需求，需要改用Material UI X的DatePicker组件，它提供了自定义禁用日期的能力。

步骤1：安装依赖 #

首先需要安装Material UI X的日期选择器包及日期处理库（以dayjs为例）：

npm install @mui/x-date-pickers dayjs

步骤2：完整代码实现 #

替换原有的TextField为DatePicker组件，通过shouldDisableDate属性指定要禁用的日期：

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

// 定义需要禁用的日期数组
const disabledDates = [
  dayjs('2023-01-31'),
  dayjs('2023-02-01'),
  dayjs('2023-02-02'),
];

// 自定义日期选择器组件
function CustomDatePicker({ row }) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        variant="outlined"
        id={row?.id}
        size="small"
        // 禁用键盘输入，仅允许日历选择
        readOnly
        // 设置有效日期范围
        minDate={dayjs('2023-01-30')}
        maxDate={dayjs('2023-02-28')} // 修正：2023年2月无30日，改为当月最后一天
        // 自定义禁用日期的判断逻辑
        shouldDisableDate={(date) => {
          return disabledDates.some(disabledDate => 
            date.isSame(disabledDate, 'day')
          );
        }}
        // 自定义输入框渲染
        renderInput={(params) => (
          <TextField
            {...params}
            onKeyPress={(e) => e.preventDefault()} // 额外拦截键盘输入
          />
        )}
      />
    </LocalizationProvider>
  );
}

关键说明 #

• LocalizationProvider：必须包裹DatePicker，用于提供日期处理的适配器（示例使用dayjs）。
• shouldDisableDate：核心回调函数，接收当前日历面板的日期对象，返回true则禁用该日期。
• 日期有效性修正：原代码中的max: "02-30-2023"是无效日期，已修正为2023年2月的实际最后一天2023-02-28。
• 键盘输入拦截：通过readOnly属性和onKeyPress事件双重限制，确保用户只能通过日历面板选择日期。

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