问题

我想要显示日期选择器的年份列表，按降序排列，但无法实现。它首先显示最小日期，然后逐渐降到最大日期。

我编写的代码如下。

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

<details>
<summary>英文:</summary>

[![MUI Datepicker][1]][1]


  [1]: https://i.stack.imgur.com/nUc4G.png

I want to show the datepicker year list in Descending order but am unable to do. It shows min date at first and then goes down to the max date.

The code I wrote is written below.

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

</details>


# 答案1
**得分**: 1

你可以参考这个[实现][1]在CodeSandbox上实现日期选择器中年份按降序排列的功能。如果你需要更多信息，请查看GitHub上的[功能请求帖子][2]。

```javascript
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;

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;