diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js new file mode 100644 index 000000000000..e59fe3df9547 --- /dev/null +++ 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 ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx new file mode 100644 index 000000000000..e59fe3df9547 --- /dev/null +++ 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 ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview new file mode 100644 index 000000000000..8843c8d475b5 --- /dev/null +++ b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index e17b9b09779e..982a51388f71 100644 --- 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 new file mode 100644 index 000000000000..eeaf31c53780 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx new file mode 100644 index 000000000000..eeaf31c53780 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview new file mode 100644 index 000000000000..914e69e56715 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index c76e2b69fa8b..846716836361 100644 --- 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/next-env.d.ts b/docs/next-env.d.ts index 4f11a03dc6cc..a4a7b3f5cfa2 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 6b4dd0199c54..88e9ce699532 100644 --- 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<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 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 index 11f66d860b1c..8f8010bcf4e5 100644 --- 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<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 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 index de5a31671d26..cdf5928d090c 100644 --- 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 index ac4355088980..a64156ea0d03 100644 --- 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 index 4186360ab270..875f5158e118 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -207,6 +207,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 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 } 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 index ebbb2d916315..d1820b9ce74e 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/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 }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index c9f5528a3a66..d389019d6942 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -175,6 +175,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 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 } 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 index f4aec3a80bb5..911ec96679f0 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/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 }, 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 index ba0848986a20..57e411944cb7 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -203,6 +203,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 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 } 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 index 39ea91b009e3..2ffe9722be4a 100644 --- 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 @@ -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 }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index f61852ff2104..f9d914c1abfa 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -175,6 +175,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -241,7 +245,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 }, @@ -277,7 +281,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 }, @@ -295,7 +299,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/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 72322d7e8bcb..b5b1d54a04cd 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -251,7 +251,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/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index c81d0e8a2d47..36d5520828a8 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -194,6 +194,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -260,7 +264,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 }, @@ -296,7 +300,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 }, @@ -320,7 +324,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/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index ceb7fd706de5..1f6d76bd4612 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -314,7 +314,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/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 81afa3e045d4..d1b1fb06b8bb 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -61,7 +61,7 @@ "slots": [ { "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 } diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index a2cb884b2db1..e34ae7cdcd00 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -59,7 +59,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": "MuiPickersCalendarHeader-switchViewIcon" } diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 93d2fbdb0c88..d3feb349e7d5 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -155,9 +155,13 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, - "default": "3" + "default": "`4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise." } }, "name": "StaticDatePicker", @@ -198,7 +202,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 }, @@ -234,7 +238,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 }, @@ -246,7 +250,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/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 91ceaa5d0405..eb9b535b7bd5 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -194,7 +194,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/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 440519f2a10d..395d96190deb 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -174,9 +174,13 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, - "default": "3" + "default": "`4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise." } }, "name": "StaticDateTimePicker", @@ -217,7 +221,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 }, @@ -253,7 +257,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 }, @@ -271,7 +275,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/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index ca1c7a0685f6..3efe3212590e 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -47,6 +47,10 @@ } }, "value": { "type": { "name": "object" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -61,7 +65,7 @@ "slots": [ { "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/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 19c6404b210b..f94820268f52 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -115,6 +115,9 @@ "description": "The visible view. Used when the component view is controlled. Must be a valid option from views list." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": { @@ -128,12 +131,12 @@ "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day. Check the PickersDay component.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", - "yearButton": "Button displayed to render a single year in the "year" view." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 8536e255a604..bae8b06bdd7c 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -159,6 +159,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -178,7 +181,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -187,9 +190,9 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json index 1e1cf9c7c2bf..d2c9fc7c25b0 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json @@ -135,6 +135,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year"." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json index 3d2165e374fe..d0f54f65ca96 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json @@ -176,7 +176,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index d8994c789b60..78942a2c4925 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -196,6 +196,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -217,7 +220,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -226,10 +229,10 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json index d9cbe6026fe5..d5809a659071 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json @@ -223,7 +223,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index 0235dcbeb4f1..fb0e9086485d 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -156,6 +156,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -172,7 +175,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -181,9 +184,9 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json index a8e7907b7f9f..26fc319817ab 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json @@ -170,7 +170,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index 41c3552ab773..936c07b4b312 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -193,6 +193,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -211,7 +214,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -220,10 +223,10 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json index 9e40b5b86f95..48e711bb34d2 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json @@ -217,7 +217,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 196f25f2be15..05da31f45867 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -156,6 +156,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -169,15 +172,15 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json index 33656bf53c5f..e393f3876d5f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json @@ -166,7 +166,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index 1b95ab814138..c8696c40a67a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -184,6 +184,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -197,16 +200,16 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json index 88e8272c5347..2fc8ea3de2c8 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json @@ -213,7 +213,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json index b0ea9f642158..2ee6ae23ed75 100644 --- a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json +++ b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json @@ -46,6 +46,6 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "monthButton": "Button displayed to render a single month in the "month" view." + "monthButton": "Button displayed to render a single month in the month view." } } diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json index 14b1549d337d..4f5aeee8654a 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json @@ -26,6 +26,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year"." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index d8487afd8015..2d4f98684195 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -131,6 +131,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -140,14 +143,14 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json index 993e0008d075..0de49522ec62 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json @@ -132,7 +132,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index ffe8c876b512..7c34378a5f77 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -159,6 +159,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -168,15 +171,15 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json index 3953639dab18..561c1d30df19 100644 --- a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json +++ b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json @@ -42,10 +42,13 @@ "seeMoreText": "See the {{link}} for more details." }, "value": { "description": "The selected value. Used when the component is controlled." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index c876f0f55669..e84c7ff71c6f 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -142,6 +142,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar setFocusedView('year', isViewFocused)} + yearsOrder={yearsOrder} yearsPerRow={yearsPerRow} referenceDate={referenceDate} /> @@ -623,6 +625,12 @@ DateCalendar.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 1b59fdbaa343..8c7b965df916 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -373,6 +373,12 @@ DatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 on desktop, 3 on mobile diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 1336df730d27..be4f6c1fbfca 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -31,11 +31,6 @@ export interface DatePickerProps< * @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 {} @@ -46,4 +41,9 @@ export interface DatePickerProps< * @default {} */ slotProps?: DatePickerSlotProps; + /** + * Years rendered per row. + * @default 4 on desktop, 3 on mobile + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index beed0975c5ca..4a15379e9e78 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -446,6 +446,12 @@ DateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 on desktop, 3 on mobile diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 1c7b8b751903..8053bc8c5c63 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -10,6 +10,7 @@ import { MobileDateTimePickerSlotProps, } from '../MobileDateTimePicker'; import { PickerValidDate } from '../models'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, @@ -29,6 +30,7 @@ export interface DateTimePickerProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false, > extends DesktopDateTimePickerProps, + ExportedYearCalendarProps, Omit< MobileDateTimePickerProps< TDate, @@ -43,11 +45,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 +55,9 @@ export interface DateTimePickerProps< * @default {} */ slotProps?: DateTimePickerSlotProps; + /** + * Years rendered per row. + * @default 4 on desktop, 3 on mobile + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 5410f886c89b..6fede2f69466 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -422,6 +422,12 @@ DesktopDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 613158d9145b..340faa3f81cd 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -10,6 +10,7 @@ import { } from '../DatePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; import { DateView, PickerValidDate } from '../models'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDatePickerSlots extends BaseDatePickerSlots, @@ -25,12 +26,8 @@ export interface DesktopDatePickerProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false, > extends BaseDatePickerProps, - DesktopOnlyPickerProps { - /** - * Years rendered per row. - * @default 4 - */ - yearsPerRow?: 3 | 4; + DesktopOnlyPickerProps, + ExportedYearCalendarProps { /** * Overridable component slots. * @default {} @@ -41,4 +38,9 @@ export interface DesktopDatePickerProps< * @default {} */ slotProps?: DesktopDatePickerSlotProps; + /** + * Years rendered per row. + * @default 4 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx index 5d90362ce078..fe9e436f6926 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -264,7 +264,7 @@ describe('', () => { }); describe('Month navigation', () => { - it('should not allow to navigate to previous month if props.minDate is after the last date of the previous month', () => { + it('should not allow to navigate to previous month if props.minDate is after the last day of the previous month', () => { render( ', () => { expect(screen.getByLabelText('Previous month')).to.have.attribute('disabled'); }); - it('should allow to navigate to previous month if props.minDate is the last date of the previous month', () => { + it('should allow to navigate to previous month if props.minDate is the last day of the previous month', () => { render( ', () => { expect(screen.getByLabelText('Previous month')).not.to.have.attribute('disabled'); }); - it('should not allow to navigate to next month if props.maxDate is before the last date of the next month', () => { + it('should not allow to navigate to next month if props.maxDate is before the first day of the next month', () => { render( ', () => { expect(screen.getByLabelText('Next month')).to.have.attribute('disabled'); }); - it('should allow to navigate to next month if props.maxDate is the first date of the next month', () => { + it('should allow to navigate to next month if props.maxDate is the first day of the next month', () => { render( , ); diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index d5907a41b083..421f595a40b8 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -631,6 +631,12 @@ DesktopDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index 1351c1439e33..2f64b71e5a0a 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -17,6 +17,7 @@ import { MultiSectionDigitalClockSlotProps, } from '../MultiSectionDigitalClock'; import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, @@ -44,16 +45,8 @@ export interface DesktopDateTimePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = false, > extends BaseDateTimePickerProps, DesktopOnlyPickerProps, - DesktopOnlyTimePickerProps { - /** - * Available views. - */ - views?: readonly DateOrTimeView[]; - /** - * Years rendered per row. - * @default 4 - */ - yearsPerRow?: 3 | 4; + DesktopOnlyTimePickerProps, + ExportedYearCalendarProps { /** * Overridable component slots. * @default {} @@ -64,4 +57,13 @@ export interface DesktopDateTimePickerProps< * @default {} */ slotProps?: DesktopDateTimePickerSlotProps; + /** + * Available views. + */ + views?: readonly DateOrTimeView[]; + /** + * Years rendered per row. + * @default 4 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 8a8aeefb380e..31d270574cb2 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -419,6 +419,12 @@ MobileDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index b7b12ed698a6..b406fea447c3 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -36,4 +36,9 @@ export interface MobileDatePickerProps< * @default {} */ slotProps?: MobileDatePickerSlotProps; + /** + * Years rendered per row. + * @default 3 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 1bf3bbb56e20..ec10a6296202 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -485,6 +485,12 @@ MobileDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index 3ad5d2f0cb95..f6e79866d913 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface MonthCalendarSlots { /** - * Button displayed to render a single month in the "month" view. + * Button displayed to render a single month in the `month` view. * @default MonthCalendarButton */ monthButton?: React.ElementType; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 87c37e46afa0..8b1147682bbd 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -20,7 +20,7 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { */ switchViewButton?: React.ElementType; /** - * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year". + * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. * @default ArrowDropDown */ switchViewIcon?: React.ElementType; diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 74970bf88409..b86bc2fa3f91 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -315,9 +315,15 @@ StaticDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. - * @default 3 + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. */ yearsPerRow: PropTypes.oneOf([3, 4]), } as any; diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts index 64a84459d9b4..c27d894c5480 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts @@ -32,4 +32,9 @@ export interface StaticDatePickerProps * @default {} */ slotProps?: StaticDatePickerSlotProps; + /** + * Years rendered per row. + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 9b0b5f383f00..f132c14609a7 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -380,9 +380,15 @@ StaticDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. - * @default 3 + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. */ yearsPerRow: PropTypes.oneOf([3, 4]), } as any; diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index e154e31b8098..2810584571d6 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -32,4 +32,9 @@ export interface StaticDateTimePickerProps * @default {} */ slotProps?: StaticDateTimePickerSlotProps; + /** + * Years rendered per row. + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index 3e83737057c2..0091036bcef3 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -112,6 +112,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar { switch (event.key) { case 'ArrowUp': - focusYear(year - yearsPerRow); + focusYear(year - verticalDirection); event.preventDefault(); break; case 'ArrowDown': - focusYear(year + yearsPerRow); + focusYear(year + verticalDirection); event.preventDefault(); break; case 'ArrowLeft': - focusYear(year + (isRtl ? 1 : -1)); + focusYear(year - horizontalDirection); event.preventDefault(); break; case 'ArrowRight': - focusYear(year + (isRtl ? -1 : 1)); + focusYear(year + horizontalDirection); event.preventDefault(); break; default: @@ -285,6 +289,11 @@ export const YearCalendar = React.forwardRef(function YearCalendar - {utils.getYearRange([minDate, maxDate]).map((year) => { + {yearRange.map((year) => { const yearNumber = utils.getYear(year); const isSelected = yearNumber === selectedYear; const isDisabled = disabled || isYearDisabled(year); @@ -426,6 +435,12 @@ YearCalendar.propTypes = { * Used when the component is controlled. */ value: PropTypes.object, + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index f78d88255b6d..8a3d3a94d946 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface YearCalendarSlots { /** - * Button displayed to render a single year in the "year" view. + * Button displayed to render a single year in the `year` view. * @default YearCalendarButton */ yearButton?: React.ElementType; @@ -24,6 +24,12 @@ export interface YearCalendarSlotProps { } export interface ExportedYearCalendarProps { + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder?: 'asc' | 'desc'; /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx index d009aca7e962..fc22b7a902db 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx @@ -49,6 +49,31 @@ describe('', () => { expect(onChangeMock.callCount).to.equal(0); }); + it('should display years in ascending (chronological order) by default', () => { + render( + , + ); + + const yearButttons = screen.queryAllByMuiTest('year'); + expect(yearButttons[0].children.item(0)?.textContent).to.equal('2020'); + }); + + it('should display years in descending (reverse chronological) order when props.yearsOrder = "desc"', () => { + render( + , + ); + + const yearButtons = screen.queryAllByMuiTest('year'); + expect(yearButtons[0].children.item(0)?.textContent).to.equal('2024'); + }); + describe('Disabled', () => { it('should disable all years if props.disabled = true', () => { const onChange = spy(); diff --git a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx index fa043429c599..30d7376df088 100644 --- a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx @@ -40,6 +40,7 @@ export const renderDateViewCalendar = ({ onMonthChange, monthsPerRow, onYearChange, + yearsOrder, yearsPerRow, slots, slotProps, @@ -79,6 +80,7 @@ export const renderDateViewCalendar = ({ onMonthChange={onMonthChange} monthsPerRow={monthsPerRow} onYearChange={onYearChange} + yearsOrder={yearsOrder} yearsPerRow={yearsPerRow} slots={slots} slotProps={slotProps}