MUI Datepicker年份解析异常：输入两位年份需默认转为未来年份

MUI X DatePicker搭配date-fns适配器时，默认的两位年份解析逻辑是基于当前日期的50年区间匹配最近年份（比如2024年输入99会优先匹配1999而非2099）。minDate和disablePast属于解析后的验证规则，无法改变前置的解析行为，必须通过自定义解析逻辑解决。

方法：自定义date-fns适配器覆盖解析规则 #

创建自定义适配器，强制将两位年份映射到2000-2099区间：

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import parse from 'date-fns/parse';
import isValid from 'date-fns/isValid';

class CustomAdapter extends AdapterDateFns {
  parse(value, formatString) {
    // 仅处理两位年份格式的输入
    if (formatString.includes('yy') && typeof value === 'string') {
      const yearMatch = value.match(/(\d{2})$/);
      if (yearMatch) {
        const twoDigitYear = parseInt(yearMatch[1], 10);
        // 将两位年份转为20xx格式
        const fullYear = 2000 + twoDigitYear;
        // 替换输入值和格式为四位年份后重新解析
        const adjustedValue = value.replace(/(\d{2})$/, fullYear.toString());
        const adjustedFormat = formatString.replace('yy', 'yyyy');
        const parsedDate = parse(adjustedValue, adjustedFormat, new Date());
        
        if (isValid(parsedDate)) return parsedDate;
      }
    }
    // 其他场景沿用默认解析逻辑
    return super.parse(value, formatString);
  }
}

在组件中使用自定义适配器：

<LocalizationProvider dateAdapter={CustomAdapter}>
  <DatePicker
    inputFormat="MM/dd/yy"
    value={date}
    minDate={new Date()}
    disablePast
    onChange={(newValue) => {
      console.log("new value", newValue);
      setDate(newValue);
    }}
    renderInput={(props) => (
      <TextField
        autoFocus
        size="small"
        {...props}
        inputProps={{
          ...props.inputProps,
          autocomplete: 'off',
          placeholder: 'MM/DD/YY',
        }}
      />
    )}
  />
</LocalizationProvider>

效果验证 #

输入10/30/99后，组件会正确解析为2099-10-30，同时minDate和disablePast会自动过滤不符合要求的过去日期。

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