Mui Datepicker错误识别yyyy-MM-d格式 如何强制要求输入两位数字的日

你可以通过关闭宽松解析+固定输入掩码+自定义校验的组合方式实现需求，具体操作如下：

• 第一步：开启严格解析模式，禁用自动补全逻辑
  明确设置inputFormat为yyyy-MM-dd，同时将strictParsing属性设为true，此时组件不会自动将2020-12-1这类单日格式解析为合法日期，会直接判定为无效值。
• 第二步：配置固定输入掩码限制输入位数
  设置mask属性为____-__-__（下划线为默认占位符，也可通过maskChar自定义占位符），强制用户在月、日位置必须输入两位数字，输入时会自动固定横杠位置，少输一位则无法完成输入。
• 第三步：补充表单校验逻辑兜底
  可以在日期变更或表单提交时，额外校验输入的原始字符串长度是否为10位，不符合则抛出错误提示，避免极端场景下的格式问题。

最简实现代码示例：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';
import { useState } from 'react';

function App() {
  const [date, setDate] = useState(null);
  const [error, setError] = useState(false);

  const handleDateChange = (newValue, context) => {
    // 校验原始输入字符串是否符合10位的yyyy-MM-dd格式
    if (context.inputValue && context.inputValue.length !== 10) {
      setError(true);
      setDate(null);
    } else {
      setError(false);
      setDate(newValue);
    }
  };

  return (
    <DatePicker
      label="选择日期"
      value={date}
      onChange={handleDateChange}
      inputFormat="yyyy-MM-dd"
      strictParsing={true}
      mask="____-__-__"
      renderInput={(params) => <TextField {...params} error={error} helperText={error ? "请输入yyyy-MM-dd格式的日期，月、日需为两位数字" : ""} />}
    />
  );
}

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