[pickers] Add option to change order of displayed years

docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.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 YearsOrderDescendingCalendar() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['YearCalendar']}>
+        <DemoItem label="Years in descending order">
+          <YearCalendar maxDate={currentYear} yearsOrder="desc" />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.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 YearsOrderDescendingCalendar() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['YearCalendar']}>
+        <DemoItem label="Years in descending order">
+          <YearCalendar maxDate={currentYear} yearsOrder="desc" />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

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

@@ -0,0 +1,3 @@
+<DemoItem label="Years in descending order">
+  <YearCalendar maxDate={currentYear} yearsOrder="desc" />
+</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}}
 
+### Order of years
+
+By default, years are displayed in ascending order, chronologically from the minimum year to the maximum. Set the `yearsOrder` prop to `desc` to show the years in descending order.
+
+{{"demo": "YearsOrderDescendingCalendar.js",  "defaultCodeOpen": false}}
+
 ## Day view customization
 
 ### Show additional days

docs/data/date-pickers/date-picker/DatePickerYearsOrder.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 DatePickerYearsOrder() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Years in descending order"
+          maxDate={currentYear}
+          openTo="year"
+          views={['year', 'month']}
+          yearsOrder="desc"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/DatePickerYearsOrder.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 DatePickerYearsOrder() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Years in descending order"
+          maxDate={currentYear}
+          openTo="year"
+          views={['year', 'month']}
+          yearsOrder="desc"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

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

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

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).
 :::
 
+## Order of years
+
+By default, years are displayed in ascending order, chronologically from the minimum year to the maximum. Set the `yearsOrder` prop to `desc` to show the years in descending order.
+
+{{"demo": "DatePickerYearsOrder.js"}}
+
 ## Landscape orientation
 
 By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value.

docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

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

@@ -140,9 +140,13 @@
         "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
       }
     },
+    "yearsOrder": {
+      "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" },
+      "default": "'asc'"
+    },
     "yearsPerRow": {
       "type": { "name": "enum", "description": "3<br>&#124;&nbsp;4" },
-      "default": "3"
+      "default": "4 on desktop, 3 on mobile"
     }
   },
   "name": "DateCalendar",
@@ -172,7 +176,7 @@
     },
     {
       "name": "monthButton",
-      "description": "Button displayed to render a single month in the \"month\" view.",
+      "description": "Button displayed to render a single month in the `month` view.",
       "default": "MonthCalendarButton",
       "class": null
     },
@@ -202,13 +206,13 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },
     {
       "name": "yearButton",
-      "description": "Button displayed to render a single year in the \"year\" view.",
+      "description": "Button displayed to render a single year in the `year` view.",
       "default": "YearCalendarButton",
       "class": null
     }

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

@@ -179,9 +179,13 @@
         "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
       }
     },
+    "yearsOrder": {
+      "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" },
+      "default": "'asc'"
+    },
     "yearsPerRow": {
       "type": { "name": "enum", "description": "3<br>&#124;&nbsp;4" },
-      "default": "4 on desktop, 3 on mobile"
+      "default": "4"
     }
   },
   "name": "DatePicker",
@@ -281,7 +285,7 @@
     },
     {
       "name": "monthButton",
-      "description": "Button displayed to render a single month in the \"month\" view.",
+      "description": "Button displayed to render a single month in the `month` view.",
       "default": "MonthCalendarButton",
       "class": null
     },
@@ -334,7 +338,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },
@@ -352,7 +356,7 @@
     },
     {
       "name": "yearButton",
-      "description": "Button displayed to render a single year in the \"year\" view.",
+      "description": "Button displayed to render a single year in the `year` view.",
       "default": "YearCalendarButton",
       "class": null
     }

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

@@ -173,7 +173,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     }

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

@@ -283,7 +283,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },

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

@@ -207,6 +207,10 @@
         "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'&gt;"
       }
     },
+    "yearsOrder": {
+      "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" },
+      "default": "'asc'"
+    },
     "yearsPerRow": {
       "type": { "name": "enum", "description": "3<br>&#124;&nbsp;4" },
       "default": "4 on desktop, 3 on mobile"
@@ -321,7 +325,7 @@
     },
     {
       "name": "monthButton",
-      "description": "Button displayed to render a single month in the \"month\" view.",
+      "description": "Button displayed to render a single month in the `month` view.",
       "default": "MonthCalendarButton",
       "class": null
     },
@@ -374,7 +378,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },
@@ -398,7 +402,7 @@
     },
     {
       "name": "yearButton",
-      "description": "Button displayed to render a single year in the \"year\" view.",
+      "description": "Button displayed to render a single year in the `year` view.",
       "default": "YearCalendarButton",
       "class": null
     }

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

@@ -346,7 +346,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },

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

@@ -175,6 +175,10 @@
         "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
       }
     },
+    "yearsOrder": {
+      "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" },
+      "default": "'asc'"
+    },
     "yearsPerRow": {
       "type": { "name": "enum", "description": "3<br>&#124;&nbsp;4" },
       "default": "4"
@@ -259,7 +263,7 @@
     },
     {
       "name": "monthButton",
-      "description": "Button displayed to render a single month in the \"month\" view.",
+      "description": "Button displayed to render a single month in the `month` view.",
       "default": "MonthCalendarButton",
       "class": null
     },
@@ -312,7 +316,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },
@@ -330,7 +334,7 @@
     },
     {
       "name": "yearButton",
-      "description": "Button displayed to render a single year in the \"year\" view.",
+      "description": "Button displayed to render a single year in the `year` view.",
       "default": "YearCalendarButton",
       "class": null
     }

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

@@ -261,7 +261,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },

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

@@ -203,6 +203,10 @@
         "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'&gt;"
       }
     },
+    "yearsOrder": {
+      "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" },
+      "default": "'asc'"
+    },
     "yearsPerRow": {
       "type": { "name": "enum", "description": "3<br>&#124;&nbsp;4" },
       "default": "4"
@@ -299,7 +303,7 @@
     },
     {
       "name": "monthButton",
-      "description": "Button displayed to render a single month in the \"month\" view.",
+      "description": "Button displayed to render a single month in the `month` view.",
       "default": "MonthCalendarButton",
       "class": null
     },
@@ -352,7 +356,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },
@@ -376,7 +380,7 @@
     },
     {
       "name": "yearButton",
-      "description": "Button displayed to render a single year in the \"year\" view.",
+      "description": "Button displayed to render a single year in the `year` view.",
       "default": "YearCalendarButton",
       "class": null
     }

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

@@ -324,7 +324,7 @@
     },
     {
       "name": "switchViewIcon",
-      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".",
+      "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.",
       "default": "ArrowDropDown",
       "class": null
     },