如何在Material UI TextField中实现手动输入日期的格式自动校正？

需求说明 #

要求实现MM/DD/YYYY格式的日期输入，当用户输入非法日期时自动校正：

• 月份超过12时，自动校正为12（或取模后对应月份，比如13→1）
• 日期超过对应月份的最大天数时，自动校正为该月份的最大天数（需考虑闰年2月的情况）

实现思路 #

1. 在TextField的onChange事件中监听输入值
2. 解析输入的日期片段（月、日、年）
3. 对每个片段进行合法性校验和校正
4. 将校正后的日期格式化为MM/DD/YYYY，更新组件值

代码实现 #

首先定义日期校正工具函数，再整合到TextField组件中：

日期校正工具函数 #

// 计算指定月份的最大天数（考虑闰年）
const getMaxDaysInMonth = (month, year) => {
  // 月份从0开始（1月=0）
  return new Date(year, month, 0).getDate();
};

// 校正日期值
const validateAndCorrectDate = (inputValue) => {
  // 去除非数字字符，提取数字部分
  const digits = inputValue.replace(/\D/g, '');
  let month = '';
  let day = '';
  let year = '';

  // 拆分月、日、年片段
  if (digits.length >= 2) {
    month = digits.slice(0, 2);
  }
  if (digits.length >= 4) {
    day = digits.slice(2, 4);
  }
  if (digits.length >= 8) {
    year = digits.slice(4, 8);
  }

  // 校正月份
  if (month) {
    let numMonth = parseInt(month, 10);
    // *选项1*：超过12则设为12
    numMonth = Math.min(numMonth, 12);
    // *选项2*：超过12则取模（13→1，14→2...），处理0的情况（12%12=0→12）
    // numMonth = numMonth > 12 ? numMonth % 12 : numMonth;
    // numMonth = numMonth === 0 ? 12 : numMonth;
    month = numMonth.toString().padStart(2, '0');
  }

  // 校正日期（需先有年份和月份）
  if (day && month && year) {
    const numYear = parseInt(year, 10);
    const numMonth = parseInt(month, 10) - 1; // 转成Date的0基月份
    const maxDays = getMaxDaysInMonth(numMonth, numYear);
    let numDay = parseInt(day, 10);
    numDay = Math.min(numDay, maxDays);
    day = numDay.toString().padStart(2, '0');
  }

  // 拼接成MM/DD/YYYY格式
  let correctedValue = '';
  if (month) {
    correctedValue += month;
    if (day) {
      correctedValue += `/${day}`;
      if (year) {
        correctedValue += `/${year}`;
      }
    }
  }
  return correctedValue;
};

整合到Material UI TextField组件 #

import { TextField } from '@mui/material';
import { useState } from 'react';

const DateInput = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const inputValue = e.target.value;
    const correctedDate = validateAndCorrectDate(inputValue);
    setValue(correctedDate);
  };

  return (
    <TextField
      value={value}
      onChange={handleChange}
      InputLabelProps={{ shrink: true }}
      placeholder="MM/DD/YYYY"
      sx={{ /* 你的calender样式 */ }}
    />
  );
};

export default DateInput;

说明 #

• 工具函数中提供了两种月份校正逻辑，可根据需求选择注释对应的代码
• 日期校正会自动根据月份和年份计算最大天数，包含闰年2月的处理
• 输入过程中会自动去除非数字字符，逐步拼接成规范的日期格式

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