[pickers] Update calendar header to MD3 with separate year and month buttons

[heshamwhite]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Using the StaticDateTimePicker, in "Calendar Header", there are a button with the month and year label and previous and next month buttons.

I find it unintuitive that when clicking the month and year button (circled in red in screenshot) , the year view comes up. And in order to pick another month, one have to use the next button to go through all months until the intended month is reached.

In order to get the months view to appear, I have to remove the years view altogether. However, the years view is still needed in my use case.

Examples 🌈

Here is the code of the screenshot provided above.Sandbox

Motivation 🔦

It would be nice to have an option to change the behavior of this button to show the months view instead of the years view. I tried to rewrite the view through the slots property, but I was unsuccessful.
Would it be possible to provide this functionality or a possible workaround?

Order ID 💳 (optional)

No response

[LukasTy]

It would be nice to have an option to change the behavior of this button to show the months view instead of the years view

Could you clarify your expected behavior?

• Do you wish for the month view to be opened first when clicking on this button? In which case, specifying views={['month', 'year', 'day']} should do the trick
• Would you like a different experience for switching between the available views?

[heshamwhite]

@LukasTy sure.

For this specific button(the red circled one), I don’t want to show the years view at all, only the months view and skip the years view.

If the user want to change the year, they can click on the year button at the very top under “SELECT DATE & TIME“

[LukasTy]

If the user want to change the year, they can click on the year button at the very top under “SELECT DATE & TIME“

This part couldn't be the default, because the toolbar will not necessarily will be visible in everyone's cases, because its visibility can be controlled.

For this specific button(the red circled one), I don’t want to show the years view at all, only the months view and skip the years view.

This looks like a very specific requirement, especially given the current state of the header. There is no option to currently achieve your desired result, but feel free to follow #7784. It should allow providing a custom header, where you could provide a custom experience. 👌

As for an out-of-the-box solution leaning closer towards your suggestion—we'll need to focus on bringing the pickers' design more in line with the MD3 suggestion and possibly provide separate triggers to open years and month views switching.
Would that cover your use case as well? 🤔

[nanaynaomi]

As for an out-of-the-box solution leaning closer towards your suggestion—we'll need to focus on bringing the pickers' design more in line with the MD3 suggestion and possibly provide separate triggers to open years and month views switching.
Would that cover your use case as well? 🤔

Hello @LukasTy - I am wondering if this case is still going to be added where we have the option of separate month and year picker buttons out-of-the-box? This would be very useful for us.

[LukasTy]

@nanaynaomi Yes, that is still on our agenda. 😉
I have updated the issue title to reflect the relation with MD3 and put the issue into grooming.
Don't expect a quick resolution, though, as we have higher-priority issues/topics to resolve. 🙈