如何在material-ui Date Picker的日历UI中按降序显示年份

Question

我使用的示例代码 -

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",

这就是日历的样子 -

我希望年份按降序排列，以便用户不必滚动日历 UI 的底部来根据

maxDate

中提供的

props

选择最近的年份。

我浏览了 DatePicker 组件的

docs

，但没有找到反转年份顺序的道具。

我也尝试实现这个 - 如何在 MUI 中以降序显示 DatePicker 组件的年份列表，但由于 mui 版本不同，我无法复制它。

您能帮我解决这个问题吗，这将是很大的帮助。谢谢。

P.S - 这是上面提到的代码

Answer 1

您需要扩展本地化提供商的

getYearRange

实现（在您的情况下为

AdapterDateFns

）。这是一个例子：

class ExtendedAdapterDateFns extends AdapterDateFns {
  getYearRange = (start: Date, end: Date) => {
    const startDate = startOfYear(start);
    const endDate = endOfYear(end);
    const years = [];

    let currentYear = startDate;
    while (isAfter(currentYear, endDate)) {
      years.push(currentYear);
      addYears(currentYear, 1);
    }
    return years;
  }

    <LocalizationProvider dateAdapter={ExtendedAdapterDateFns}>