javascriptreactjsmaterial-uimui-x-date-picker

Best way to change the date header title on MUI Date Picker?


I'm looking for a way to customize the Calendar title for MUI Date Picker. The one that displays the month and year, for example, "August 2014."

enter image description here

I can't find any props in the API which contain what I need. But there HAS to be a way to customize this text. Essentially, I want to add a string to it.

Does anyone have any idea where I can customize this part of the date picker?


Solution

  • Update Jan 2024: Take a look at the comment underneath.

    Original: I tried to remove the "year" and keep only months. In order to do so I searched on MUI Datepicker repository, looks like it's hard-coded as "monthAndYear" so, currently we cannot do it elegantly.

    https://github.com/mui/mui-x/blob/d5ba5769bc7338f98675c954f88cf848a7ba7545/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx#L272