[DatePicker] Allow to change order of month and year in PickersCalendarHeader

[shiwano]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Allow to change the order of year and month in PickersCalendarHeader component for non-Western countries.

IMO: I’d be happy to customize it like this:

<DesktopDatePicker
   renderCalendarHeaderTitle={(date) => format(date, 'yyyy/mm')}            
/>

The relevant code is here: https://github.com/mui-org/material-ui/blob/db8a5f536ffb4e0dc0dadffcdfd69eebff62de27/packages/mui-lab/src/CalendarPicker/PickersCalendarHeader.tsx#L177-L200

Examples 🌈

Actual:

Expected:

I'd like to change the actual to the expected.

Motivation 🔦

I am creating UI components for Japanese using MUI 5, but in Japan, it is not common that year follows month. It has a merit to make this possible so that the DatePicker can be more useful in non-Western countries.

[gky360]

+1 for this issue.

I'm not sure, but I think using the monthAndYear format in PickersCalendarHeader seems more appropriate than using month and year formats separately and hard-coding their order.

<FadeTransitionGroup
  reduceAnimations={reduceAnimations}
  transKey={utils.format(month, 'monthAndYear')}
>
  <PickersCalendarHeaderLabelItem
    aria-live="polite"
    data-mui-test="calendar-month-and-year-text"
    ownerState={ownerState}
  >
    {utils.format(month, 'monthAndYear')}
  </PickersCalendarHeaderLabelItem>
</FadeTransitionGroup>

If PickersCalendarHeader uses monthAndYear format here, we can change the order of month and year by passing custom dateFormats prop to LocalizationProvider.

<LocalizationProvider
   dateFormats={{ monthAndYear: 'yyyy MM' }}            
>
  ...

[adsee42]

Any workaround for now?

[munepom]

I realized this issue, and viewed the following source code and found the cause. https://github.com/mui/material-ui/blob/04366056c2e078b5e5425be2ce9f2515dfaf7bcc/packages/mui-lab/src/CalendarPicker/PickersCalendarHeader.tsx#L185-L208

Perhaps it could be improved in the way @gky360 is describing. (and smart way)

[NguyenPhuonng]

@gky360 Thanks for amazing answer :heart: