[pickers] Add option to change order of displayed years (mui#11780)

Signed-off-by: Thomas Moon <thomas.moon@teamit.fi> Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com> Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
arthurbalduini · Sep 30, 2024 · 77cb8bc · 77cb8bc
1 parent 24fcebc
commit 77cb8bc
Show file tree

Hide file tree

Showing 71 changed files with 423 additions and 119 deletions.
diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js b/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>
+  );
+}
diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx b/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>
+  );
+}
diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview b/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>
diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -63,6 +63,13 @@ 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

diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.js b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+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}>
+      <DatePicker
+        label="Years in descending order"
+        maxDate={currentYear}
+        openTo="year"
+        views={['year', 'month']}
+        yearsOrder="desc"
+        sx={{ minWidth: 250 }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+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}>
+      <DatePicker
+        label="Years in descending order"
+        maxDate={currentYear}
+        openTo="year"
+        views={['year', 'month']}
+        yearsOrder="desc"
+        sx={{ minWidth: 250 }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview
@@ -0,0 +1,8 @@
+<DatePicker
+  label="Years in descending order"
+  maxDate={currentYear}
+  openTo="year"
+  views={['year', 'month']}
+  yearsOrder="desc"
+  sx={{ minWidth: 250 }}
+/>
diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
@@ -91,6 +91,13 @@ 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.

diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json
@@ -140,6 +140,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": "3"
@@ -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
     }

diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json
@@ -179,6 +179,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 on desktop, 3 on mobile"
@@ -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
     }

diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/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
     }

diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/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
     },

diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json
@@ -204,6 +204,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"
@@ -318,7 +322,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
     },
@@ -371,7 +375,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
     },
@@ -395,7 +399,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
     }

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json
@@ -343,7 +343,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
     },

diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json
@@ -172,6 +172,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"
@@ -256,7 +260,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
     },
@@ -309,7 +313,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
     },
@@ -327,7 +331,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
     }

diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json
@@ -258,7 +258,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
     },

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
@@ -200,6 +200,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"
@@ -296,7 +300,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
     },
@@ -349,7 +353,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
     },
@@ -373,7 +377,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
     }

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json
@@ -321,7 +321,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
     },