Revision history [back]

To arrange years in reverse order within the material-ui Date Picker's calendar UI, you can pass a start year and end year to the DatePicker component and set the shouldDisableYear prop function to return false for all the years within the range. Here's an example:

const startYear = 1950;
const endYear = 2021;

function shouldDisableYear(year) {
  return year < startYear || year > endYear;
}

<DatePicker
  label="Pick a date"
  views={['year', 'month', 'date']}
  shouldDisableYear={shouldDisableYear}
  minDate={new Date(startYear, 0, 1)}
  maxDate={new Date(endYear, 11, 31)}
/>

This will enable only the years within the range and display them in reverse order within the calendar UI.