如何为@mui/x-date-pickers设置输入年份的特定范围限制？

你遇到的问题是minDate和maxDate仅限制弹窗日历的选择范围，不会拦截手动输入的非法年份，直接加mask属性不生效，是因为MUI X DatePicker的文本输入层需要配合特定配置来处理输入校验。下面是两种可行的解决方案：

方案一：添加输入验证逻辑 #

通过slotProps.textField给文本框添加验证规则，同时可拦截非法输入：

<DatePicker
  label={label}
  value={value}
  open={isOpen}
  onChange={onChange}
  onOpen={changeIsOpen(true)}
  onClose={changeIsOpen(false)}
  className={styles.box__picker}
  slotProps={{
    popper: { className: styles.box },
    textField: {
      helperText,
      error,
      // 添加输入验证规则
      validate: (value) => {
        if (!value) return true; // 空值逻辑可按需调整
        const year = value.getFullYear();
        return year >= 1000 && year <= 2023 ? true : '年份需在1000-2023之间';
      },
      // 实时拦截非法输入（可选）
      inputProps: {
        onChange: (e) => {
          const inputValue = e.target.value;
          // 匹配输入中的年份部分，需根据你的日期格式调整正则
          const yearMatch = inputValue.match(/\d{4}/);
          if (yearMatch) {
            const year = parseInt(yearMatch[0], 10);
            if (year < 1000 || year > 2023) {
              e.preventDefault();
              // 也可手动重置到合法年份，比如 e.target.value = inputValue.replace(/\d{4}/, '2023');
            }
          }
        }
      }
    },
  }}
  minDate={MIN_DATE}
  maxDate={MAX_DATE}
/>

方案二：配置正确的Mask（适配MUI X输入组件） #

如果坚持用mask，需要通过useMaskedInput绑定，直接在InputProps加mask属性不生效，因为MUI X的文本输入层是封装过的。示例如下：

import { useMaskedInput } from '@mui/x-date-pickers/internals';

// ...

<DatePicker
  // 其他属性保持不变
  slotProps={{
    textField: {
      helperText,
      error,
      inputComponent: useMaskedInput({
        mask: '____-__-__', // 匹配YYYY-MM-DD格式，按需调整
        onChange: (event) => {
          const { value } = event.target;
          const year = value.slice(0, 4);
          if (year.length === 4 && (parseInt(year) < 1000 || parseInt(year) > 2023)) {
            // 处理非法年份，比如重置为2023
            event.target.value = '2023' + value.slice(4);
          }
        }
      })
    }
  }}
  minDate={MIN_DATE}
  maxDate={MAX_DATE}
/>

关键提示 #

• minDate/maxDate仅控制日历弹窗的可选日期，对手动输入完全无效，必须额外添加输入校验逻辑。
• 若使用mask功能，必须通过@mui/x-date-pickers/internals提供的useMaskedInput来绑定，否则无法生效。

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