如何验证Material UI Datepicker？限制合法日期输入范围

1. 限制输入框字符类型与长度 #

通过配置Datepicker的inputProps，拦截非法输入并限制总长度，避免用户输入超出范围的内容：

<DatePicker
  label="日期选择器"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  renderInput={(params) => (
    <TextField
      {...params}
      inputProps={{
        ...params.inputProps,
        maxLength: 10, // 匹配YYYY-MM-DD格式长度
        onKeyPress: (e) => {
          // 仅允许数字和分隔符(-)输入
          if (!/[0-9-]/.test(e.key)) e.preventDefault();
        },
        onInput: (e) => {
          let inputVal = e.target.value;
          if (inputVal.includes('-')) {
            const [year, month, day] = inputVal.split('-');
            // 修正月份范围（1-12）
            if (month && parseInt(month) > 12) {
              inputVal = `${year}-12${day ? `-${day}` : ''}`;
            } else if (month && parseInt(month) < 1) {
              inputVal = `${year}-01${day ? `-${day}` : ''}`;
            }
            // 修正日期范围（1-31）
            if (day && parseInt(day) > 31) {
              inputVal = `${year}-${month}-31`;
            } else if (day && parseInt(day) < 1) {
              inputVal = `${year}-${month}-01`;
            }
            e.target.value = inputVal;
          }
        }
      }}
    />
  )}
/>

2. 启用内置日期有效性验证 #

配合shouldDisableDate属性禁用无效日期，同时通过表单错误提示告知用户：

const [value, setValue] = useState(null);
const [error, setError] = useState(false);
const [helperText, setHelperText] = useState('');

const checkValidDate = (date) => {
  if (!date) return true;
  const isValid = !isNaN(date.getTime());
  if (!isValid) {
    setError(true);
    setHelperText('请输入合法的日期格式（YYYY-MM-DD）');
  } else {
    setError(false);
    setHelperText('');
  }
  return isValid;
};

<DatePicker
  label="带验证的日期选择器"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
    checkValidDate(newValue);
  }}
  shouldDisableDate={(date) => !checkValidDate(date)}
  renderInput={(params) => (
    <TextField
      {...params}
      error={error}
      helperText={helperText}
      inputProps={{
        ...params.inputProps,
        maxLength: 10,
        onKeyPress: (e) => {
          if (!/[0-9-]/.test(e.key)) e.preventDefault();
        }
      }}
    />
  )}
/>

3. 第三方日期库严格校验 #

结合date-fns等工具库解析输入内容，确保日期完全合法：

import { parseISO, isValid } from 'date-fns';

const handleInputBlur = (e) => {
  const inputVal = e.target.value;
  if (inputVal) {
    const parsedDate = parseISO(inputVal);
    if (!isValid(parsedDate)) {
      setError(true);
      setHelperText('日期格式无效，请输入YYYY-MM-DD的合法日期');
      setValue(null);
    } else {
      setError(false);
      setHelperText('');
      setValue(parsedDate);
    }
  }
};

// 在renderInput中添加失焦校验
<TextField
  {...params}
  error={error}
  helperText={helperText}
  onBlur={handleInputBlur}
  inputProps={{
    ...params.inputProps,
    maxLength: 10,
    onKeyPress: (e) => {
      if (!/[0-9-]/.test(e.key)) e.preventDefault();
    }
  }}
/>

核心逻辑说明 #

• 输入拦截：通过onKeyPress过滤非法字符，maxLength限制总输入长度，避免无限输入。
• 实时修正：在onInput中对月份、日期做范围校验，即时修正超出范围的输入。
• 有效性校验：通过日期对象或第三方库判断日期合法性，配合表单错误提示明确告知用户问题。

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