[pickers] Add previous and next year controls to date calendars

[konrazem]

Summary 💡

I would like to have another 2 icon buttons with double arrows to be able to navigate between calendar years. We have a case where the user needs to pick date ranges from many custom years (1989, 2022, ...).

I know we can implement date input to provide custom dates, however, those arrows reduce much of our work.

NOTE: It can be optional with some properties like disableYearsNavigation.

Examples 🌈

Motivation 🔦

User may want to move faster between calendar months. Those 2 arrow buttons allow to move ~12 x faster.

Search keywords: StaticDateRangePicker, DateRangeCalendar, date-pickers, mui-x, x-date-pickers-pro Order ID: 46820

[konrazem]

I think it will require also change in slots

leftArrowIcon
rightArrowIcon
nextIconButton
previousIconButton

to ?

leftArrowIcon
rightArrowIcon

leftDoubleArrowIcon
rightDoubleArrowIcon

nextMonthIconButton
previousMonthIconButton

nextYearIconButton
previousYearIconButton

[LukasTy]

Thank you for the suggestion. 🙏 MD3 (Material You) also specifies quick navigation between years in their spec for the Docked (Desktop) date picker. We'll explore this option and the best way to introduce it. 👌

[konrazem]

Hello @LukasTy any progress so far (decision to do it) ? 😊 We are not sure if to do walkaround or to wait/help

[LukasTy]

@konrazem Thank you for reminding me about this! We did not get the chance to groom it yet. The implementation of the MD3 features is not our top priority at the moment, hence, I doubt that we will be able to ship a solution for it in less than 6 months. If you need it sooner, please feel free to implement it on your own. 😉

[LukasTy]

During the grooming, we decided to start with exposing a calendarHeader on the DateRangePicker as well as DatePicker so that it would be possible to override the header as per user needs. The adoption of MD3 spec is a much broader topic that will also take more time than this addition.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @konrazem? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.