[pickers] Add option to change order of displayed years

docs/data/date-pickers/date-calendar/ReverseYearCalendar.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
+
+const currentYear = dayjs();
+
+export default function ReverseYearCalendar() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['YearCalendar']}>
+        <DemoItem label="Years in reverse">
+          <YearCalendar maxDate={currentYear} reverseYears />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-calendar/ReverseYearCalendar.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
+
+const currentYear = dayjs();
+
+export default function ReverseYearCalendar() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['YearCalendar']}>
+        <DemoItem label="Years in reverse">
+          <YearCalendar maxDate={currentYear} reverseYears />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-calendar/ReverseYearCalendar.tsx.preview

@@ -0,0 +1,3 @@
+<DemoItem label="Years in reverse">
+  <YearCalendar maxDate={currentYear} reverseYears />
+</DemoItem>

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -63,6 +63,12 @@ If you only need the `year` view or the `month` view, you can use the `YearCalen
 
 {{"demo": "YearMonthCalendar.js", "defaultCodeOpen": false}}
 
+### Reverse years
+
+The `reverseYears` prop can be set to show the years in reverse chronological order.
+
+{{"demo": "ReverseYearCalendar.js",  "defaultCodeOpen": false}}
+
 ## Day view customization
 
 ### Show additional days

docs/data/date-pickers/date-picker/DatePickerReverseYears.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const currentYear = dayjs();
+
+export default function DatePickerReverseYears() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Years in reverse"
+          maxDate={currentYear}
+          openTo="year"
+          reverseYears
+          views={['year', 'month']}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/DatePickerReverseYears.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const currentYear = dayjs();
+
+export default function DatePickerReverseYears() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Years in reverse"
+          maxDate={currentYear}
+          openTo="year"
+          reverseYears
+          views={['year', 'month']}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/DatePickerReverseYears.tsx.preview

@@ -0,0 +1,7 @@
+<DatePicker
+  label="Years in reverse"
+  maxDate={currentYear}
+  openTo="year"
+  reverseYears
+  views={['year', 'month']}
+/>

docs/data/date-pickers/date-picker/date-picker.md

@@ -91,6 +91,12 @@ If the view defined in `openTo` is not the first view, then the views before wil
 (for example view the default behaviors, the `year` is only accessible when clicking on the toolbar).
 :::
 
+## Reverse years
+
+The `reverseYears` prop can be set to show the years in reverse chronological order.
+
+{{"demo": "DatePickerReverseYears.js"}}
+
 ## Landscape orientation
 
 By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value.

docs/pages/x/api/date-pickers/date-calendar.json

@@ -81,6 +81,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "shouldDisableDate": {
       "type": { "name": "func" },
       "signature": {

docs/pages/x/api/date-pickers/date-picker.json

@@ -111,6 +111,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/date-time-picker.json

@@ -119,6 +119,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/desktop-date-picker.json

@@ -107,6 +107,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/desktop-date-time-picker.json

@@ -115,6 +115,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/mobile-date-picker.json

@@ -107,6 +107,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/mobile-date-time-picker.json

@@ -115,6 +115,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "selectedSections": {
       "type": {
         "name": "union",

docs/pages/x/api/date-pickers/static-date-picker.json

@@ -93,6 +93,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "shouldDisableDate": {
       "type": { "name": "func" },
       "signature": {

docs/pages/x/api/date-pickers/static-date-time-picker.json

@@ -101,6 +101,7 @@
         "returned": "React.ReactNode"
       }
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "shouldDisableDate": {
       "type": { "name": "func" },
       "signature": {

docs/pages/x/api/date-pickers/year-calendar.json

@@ -17,6 +17,7 @@
       "type": { "name": "object" },
       "default": "The closest valid year using the validation props, except callbacks such as `shouldDisableYear`."
     },
+    "reverseYears": { "type": { "name": "bool" }, "default": "false" },
     "shouldDisableYear": {
       "type": { "name": "func" },
       "signature": {

docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json

@@ -77,6 +77,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "shouldDisableDate": {
       "description": "Disable specific date.<br>Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.",
       "typeDescriptions": {

docs/translations/api-docs/date-pickers/date-picker/date-picker.json

@@ -115,6 +115,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json

@@ -135,6 +135,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json

@@ -112,6 +112,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json

@@ -132,6 +132,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json

@@ -112,6 +112,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json

@@ -132,6 +132,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "selectedSections": {
       "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type <code>FieldSectionType</code> is provided, the first section with that name will be selected. 3. If <code>&quot;all&quot;</code> is provided, all the sections will be selected. 4. If <code>null</code> is provided, no section will be selected. If not provided, the selected sections will be handled internally."
     },

docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json

@@ -90,6 +90,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "shouldDisableDate": {
       "description": "Disable specific date.<br>Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.",
       "typeDescriptions": {

docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json

@@ -110,6 +110,9 @@
       "description": "Component displaying when passed <code>loading</code> true.",
       "typeDescriptions": { "React.ReactNode": "The node to render when loading." }
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "shouldDisableDate": {
       "description": "Disable specific date.<br>Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.",
       "typeDescriptions": {

docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json

@@ -25,6 +25,9 @@
     "referenceDate": {
       "description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."
     },
+    "reverseYears": {
+      "description": "If <code>false</code>, display the years in their default order (chronological) If <code>true</code>, reverse the order of displayed years"
+    },
     "shouldDisableYear": {
       "description": "Disable specific year.",
       "typeDescriptions": {

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -142,6 +142,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
     loading,
     renderLoading,
     displayWeekNumber,
+    reverseYears,
     yearsPerRow,
     monthsPerRow,
     timezone: timezoneProp,
@@ -355,6 +356,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
               hasFocus={hasFocus}
               onFocusedViewChange={(isViewFocused) => setFocusedView('year', isViewFocused)}
               yearsPerRow={yearsPerRow}
+              reverseYears={reverseYears}
               referenceDate={referenceDate}
             />
           )}
@@ -547,6 +549,12 @@ DateCalendar.propTypes = {
    * @default () => <span data-mui-test="loading-progress">...</span>
    */
   renderLoading: PropTypes.func,
+  /**
+   * If `false`, display the years in their default order (chronological)
+   * If `true`, reverse the order of displayed years
+   * @default false
+   */
+  reverseYears: PropTypes.bool,
   /**
    * Disable specific date.
    *

packages/x-date-pickers/src/DatePicker/DatePicker.tsx

@@ -263,6 +263,12 @@ DatePicker.propTypes = {
    * @default () => <span data-mui-test="loading-progress">...</span>
    */
   renderLoading: PropTypes.func,
+  /**
+   * If `false`, display the years in their default order (chronological)
+   * If `true`, reverse the order of displayed years
+   * @default false
+   */
+  reverseYears: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accepts four formats:

packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx

@@ -301,6 +301,12 @@ DateTimePicker.propTypes = {
    * @default () => <span data-mui-test="loading-progress">...</span>
    */
   renderLoading: PropTypes.func,
+  /**
+   * If `false`, display the years in their default order (chronological)
+   * If `true`, reverse the order of displayed years
+   * @default false
+   */
+  reverseYears: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accepts four formats:

packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts

@@ -43,11 +43,6 @@ export interface DateTimePickerProps<
    * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
    */
   desktopModeMediaQuery?: string;
-  /**
-   * Years rendered per row.
-   * @default 4 on desktop, 3 on mobile
-   */
-  yearsPerRow?: 3 | 4;
   /**
    * Overridable component slots.
    * @default {}
@@ -58,4 +53,9 @@ export interface DateTimePickerProps<
    * @default {}
    */
   slotProps?: DateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
 }