如何配置Material UI KeyboardDatePicker支持单双位月份日期混合输入

Material UI KeyboardDatePicker本身不支持直接传入多个格式配置，但可以通过自定义解析逻辑实现同时兼容单/双位月、单/双位日的日期输入需求，具体操作如下：

• 关闭组件默认的严格解析模式，配置strictParsing={false}
• 重写组件的parse属性，用项目内使用的日期库的多格式解析能力，按优先级匹配所有需要支持的日期格式

以下是基于date-fns的完整示例代码：

import { useState } from 'react';
import { parse, isDate } from 'date-fns';
import KeyboardDatePicker from '@material-ui/pickers/KeyboardDatePicker';

const CustomDatePicker = () => {
  const [date, setDate] = useState(null);

  const handleParseInput = (inputValue) => {
    if (!inputValue) return null;
    // 按使用频率排序所有需要支持的格式
    const allowFormats = ['M/d/yyyy', 'MM/d/yyyy', 'M/dd/yyyy', 'MM/dd/yyyy'];
    
    for (const format of allowFormats) {
      const parsedDate = parse(inputValue, format, new Date());
      if (isDate(parsedDate) && !isNaN(parsedDate.getTime())) {
        return parsedDate;
      }
    }
    return null;
  };

  return (
    <KeyboardDatePicker
      label="选择日期"
      value={date}
      onChange={setDate}
      format="M/d/yyyy"
      parse={handleParseInput}
      strictParsing={false}
      inputVariant="outlined"
    />
  )
}

补充说明 #

• 示例代码中的format="M/d/yyyy"仅控制日期选中后在输入框内的展示格式，不会影响解析逻辑，可根据需求自行调整
• 如果使用dayjs作为日期工具库，直接调用dayjs(inputValue, allowFormats)即可实现多格式匹配，无需循环判断
• 如果使用moment作为日期工具库，对应调用moment(inputValue, allowFormats, true)即可实现多格式解析

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