如何在Material-UI Date Picker日历UI中降序显示年份

问题背景 #

使用MUI X v6的DatePicker组件时，默认年份列表为升序排列，用户需要滚动到底部才能选择设置的maxDate（示例中为2008年）。查阅官方文档未找到直接反转年份顺序的Props，低版本适配方案无法兼容当前v6版本。

示例代码 #

import "./styles.css";
import { DatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { useState } from "react";
import moment from "moment";

export default function App() {
  const [open, setOpen] = useState(false);
  const [dateValue, setDateValue] = useState("");
  return (
    <div className="App">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          open={open}
          openTo="year"
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
          value={dateValue}
          onChange={(v) => setDateValue(v)}
          InputAdornmentProps={{ position: "start" }}
          views={["year", "month", "day"]}
          minDate={moment("12/31/1930").toDate()}
          maxDate={moment("1/31/2008").toDate()}
          inputFormat="MMMM-yyyy"
        />
      </LocalizationProvider>
    </div>
  );
}

依赖版本 #

"@emotion/react": "11.10.6",
"@emotion/styled": "11.10.6",
"@mui/material": "5.11.14",
"@mui/x-date-pickers": "6.0.3",
"date-fns": "2.29.3",

解决方案 #

针对MUI X v6版本，通过自定义YearPicker的年份生成逻辑实现降序排列：

步骤1：导入YearPicker组件 #

import { YearPicker } from "@mui/x-date-pickers/YearPicker";

步骤2：配置DatePicker的slots和slotProps #

在DatePicker中指定自定义年份选择器，并通过generateYearRange回调反转年份数组：

<DatePicker
  // 保留原有所有Props
  slots={{ yearPicker: YearPicker }}
  slotProps={{
    yearPicker: {
      generateYearRange: (minDate, maxDate, dateAdapter) => {
        // 获取默认升序年份数组并反转
        const defaultYears = dateAdapter.getYearRange(minDate, maxDate);
        return [...defaultYears].reverse();
      }
    }
  }}
/>

完整修改代码 #

import "./styles.css";
import { DatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { YearPicker } from "@mui/x-date-pickers/YearPicker";
import { useState } from "react";
import moment from "moment";

export default function App() {
  const [open, setOpen] = useState(false);
  const [dateValue, setDateValue] = useState("");
  return (
    <div className="App">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          open={open}
          openTo="year"
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
          value={dateValue}
          onChange={(v) => setDateValue(v)}
          InputAdornmentProps={{ position: "start" }}
          views={["year", "month", "day"]}
          minDate={moment("12/31/1930").toDate()}
          maxDate={moment("1/31/2008").toDate()}
          inputFormat="MMMM-yyyy"
          slots={{ yearPicker: YearPicker }}
          slotProps={{
            yearPicker: {
              generateYearRange: (minDate, maxDate, dateAdapter) => {
                const defaultYears = dateAdapter.getYearRange(minDate, maxDate);
                return [...defaultYears].reverse();
              }
            }
          }}
        />
      </LocalizationProvider>
    </div>
  );
}

原理说明 #

generateYearRange是YearPicker的核心回调，负责生成年份选择器的年份数组。通过获取默认升序数组并反转，直接改变年份展示顺序，让最新年份显示在列表顶部，无需用户滚动。

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