MUI X DatePicker无法选择1900年前日期的解决求助

MUI DatePicker默认将最小可选日期限制在了1900年，你只需手动设置minDate属性就能覆盖这个限制，适配19世纪50年代及更早的日期选择需求，以下是针对不同日期适配器的具体实现：

1. 使用date-fns适配器 #

直接创建目标年份的Date对象，传入minDate：

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

export default function CustomDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择1850年后的日期"
        minDate={new Date('1850-01-01')}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

2. 使用dayjs适配器 #

通过dayjs创建目标日期对象：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import TextField from '@mui/material/TextField';
import dayjs from 'dayjs';

export default function CustomDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择1850年后的日期"
        minDate={dayjs('1850-01-01')}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

3. 使用moment适配器 #

借助moment生成目标日期：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import TextField from '@mui/material/TextField';
import moment from 'moment';

export default function CustomDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        label="选择1850年后的日期"
        minDate={moment('1850-01-01')}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

注意事项 #

• 无需切换组件库，保持MUI生态即可解决问题
• date-fns、dayjs、moment均原生支持19世纪及更早日期，无需额外适配
• 若需要更灵活的范围限制，可同时设置maxDate属性

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