如何让MUI DatePicker组件的年份列表按降序显示

你需要将DatePicker的年份列表改为降序（从当前年份到2000年），当前默认是升序排列。

你的现有代码：

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <DatePicker
    views={['year', 'month']}
    label="Month"
    value={selectedDate}
    onChange={(value) => setSelectedDate(value)}
    animateYearScrolling
    minDate={'01-01-2000'}
    maxDate={new Date()}
  />
</MuiPickersUtilsProvider>

解决方案 #

由于@material-ui/pickers默认不支持直接配置年份排序，我们可以通过自定义年份选择器的渲染逻辑来实现降序：

1. 导入YearPicker组件
2. 通过renderYear属性自定义年份选项的排序和渲染

修改后的代码如下：

import { MuiPickersUtilsProvider, DatePicker, YearPicker } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

// 自定义年份渲染函数，生成降序年份列表
const renderYear = (date, selectedDate, handleDateChange, datePickerProps) => {
  const { minDate, maxDate } = datePickerProps;
  const minYear = minDate.getFullYear();
  const maxYear = maxDate.getFullYear();
  
  // 生成从最大年份到最小年份的数组
  const years = [];
  for (let year = maxYear; year >= minYear; year--) {
    years.push(year);
  }

  return (
    <YearPicker
      date={date}
      selectedDate={selectedDate}
      onChange={handleDateChange}
      years={years}
      {...datePickerProps}
    />
  );
};

// 使用自定义渲染逻辑的DatePicker
<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <DatePicker
    views={['year', 'month']}
    label="Month"
    value={selectedDate}
    onChange={(value) => setSelectedDate(value)}
    animateYearScrolling
    minDate={new Date('2000-01-01')} // 建议转为Date对象，避免解析兼容性问题
    maxDate={new Date()}
    renderYear={renderYear}
  />
</MuiPickersUtilsProvider>

注意事项 #

• 若使用MUI v5的@mui/x-date-pickers，API逻辑会有差异，需改用YearCalendar组件自定义排序逻辑
• 始终将日期参数转为Date对象，避免字符串格式带来的跨环境解析问题

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