如何在 MUI 中按降序显示 DatePicker 组件的年份列表答案

【问题标题】：How to show year list in a descending order for DatePicker component in MUI如何在 MUI 中按降序显示 DatePicker 组件的年份列表
【发布时间】：2023-02-17 17:23:14
【问题描述】：

我想按降序显示日期选择器年份列表，但我做不到。它首先显示最小日期，然后向下显示最大日期。

我写的代码写在下面。

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

【问题讨论】：

标签： javascript reactjs sorting material-ui frontend

【解决方案1】：

可以参考codesandbox上的这个implementation来实现上面提到的datepicker中年份的降序排列。如果您想了解更多信息，请参阅 github 上的feature request thread。

import React from "react";
import { MuiPickersUtilsProvider } from "material-ui-pickers";
import MomentUtils from "@date-io/moment";
import { DatePicker } from "material-ui-pickers";
import moment from "moment";
moment.locale();

class LocalizedUtils extends MomentUtils {
  getYearRange(start, end) {
    const startDate = this.moment(end).startOf("year");
    const endDate = this.moment(start).endOf("year");
    const years = [];

    let current = startDate;
    while (current.isAfter(endDate)) {
      years.push(current);
      current = current.clone().subtract(1, "year");
    }

    return years;
  }
}

class App extends React.Component {
  state = { date: new Date() };

  handleDateChange = date => {
    this.setState({ date });
  };

  render() {
    return (
      <MuiPickersUtilsProvider utils={LocalizedUtils}>
        <DatePicker
          clearable
          onChange={this.handleDateChange}
          showTabs={false}
          variant="outlined"
          minDate={new Date("01-01-1900")}
        />
      </MuiPickersUtilsProvider>
    );
  }
}

export default App;

【讨论】：