MUI X Date Picker设置maxDate后默认打开至1900年，如何调整？

1. 让年份选择器默认打开到maxDate对应的年份 #

可以通过initialVisibleMonth属性指定初始显示的月份，直接设置为maxDate对应年份的第一个月即可：

<DatePicker
  label="Date picker"
  openTo="year"
  maxDate={new Date(2007, 11, 31)}
  initialVisibleMonth={() => new Date(2007, 0)} // 定位到2007年1月
  renderInput={(params) => <TextField {...params} />}
/>

这个属性会强制日期选择器打开时直接聚焦到指定的年份区间，解决默认跳转到1900年的问题。

2. 将年份按降序排列 #

如果需要年份倒序显示，可以通过renderYearPicker自定义年份选择器的渲染逻辑，手动生成倒序的年份列表：

<DatePicker
  label="Date picker"
  openTo="year"
  maxDate={new Date(2007, 11, 31)}
  renderYearPicker={(props) => {
    const { minDate, maxDate, onYearChange, selectedDate } = props;
    const startYear = minDate.getFullYear();
    const endYear = maxDate.getFullYear();
    
    // 生成倒序年份数组
    const years = [];
    for (let year = endYear; year >= startYear; year--) {
      years.push(year);
    }

    return (
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, p: 2 }}>
        {years.map((year) => (
          <Button
            key={year}
            variant={selectedDate?.getFullYear() === year ? 'contained' : 'outlined'}
            onClick={() => onYearChange(new Date(year, 0, 1))}
          >
            {year}
          </Button>
        ))}
      </Box>
    );
  }}
  renderInput={(params) => <TextField {...params} />}
/>

这段代码会把可选年份从maxDate的年份开始倒序排列，点击年份后正常触发选择逻辑。

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