[pickers] The placeholder of the masked-based pickers are not localized (shows `yyyy` for year, even in Portuguese)

[Asghwor]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: demo

Steps:

1. Create a React project and setup Material UI and @mui/x-date-pickers
2. Use the pt-br (Brazilian Portuguese) locale for both the LocalizationProvider and the ThemeProvider
3. Notice the placeholder of the date picker is dd/mm/yyyy instead of dd/mm/aaaa

Current behavior 😯

The letter used for the date picker's placeholder for the year is "y" instead of "a" in Brazilian Portuguese. E.g.: dd/mm/yyyy instead of dd/mm/aaaa, mm/yyyy instead of mm/aaaa, etc.

Expected behavior 🤔

The letter used for the year should be "a". E.g.: dd/mm/aaaa instead of dd/mm/yyyy, mm/aaaa instead of mm/yyyy, etc.

Context 🔦

The word for "year" in Portuguese is "ano", starting with an "a", so the placeholders showcasing the mask to be used in a given date picker (day/month/year, month/year, day/year, year, etc) needs to use this letter to be readily understood by Portuguese speakers.

Your environment 🌎

• @mui/material 5.10.17
• @mui/x-date-picker 5.0.9

Order ID 💳 (optional)

No response

[LukasTy]

Hello @Asghwor What leads you to believe that the date format for the mentioned locale should be the one you mentioned? Could you provide any resource specifying it? I only see resources (date-fns locale, hcldoc) confirming that the format is as expected. Date formats usually reserve aa token for meridian (am/pm) part.

[flaviendelangle]

On the new pickers that will be released on v6, we are applying localization on the placeholders. But for the v5 pickers, the placeholders is pretty-much the format from the date library, and the date libraries don't apply any localization on the format itself.

[LukasTy]

On the new pickers that will be released on v6, we are applying localization on the placeholders.

But the result for v6 will be the same? Or am I missing something?

[flaviendelangle]

On v6 pickers, the placeholders are generated using the following locale keys:

  // Field section placeholders
  fieldYearPlaceholder: (params) => 'Y'.repeat(params.digitAmount),
  fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'),
  fieldDayPlaceholder: () => 'DD',
  fieldHoursPlaceholder: () => 'hh',
  fieldMinutesPlaceholder: () => 'mm',
  fieldSecondsPlaceholder: () => 'ss',
  fieldMeridiemPlaceholder: () => 'aa',

But right now, nobody translated them (because nobody uses the alpha :laughing: )

The PR introducing it is #6337

EDIT: We could probably try to translate the languages we use in the localization doc, right now it can feel deceiving. And add a picker with no default value in the Set a custom local demo to highlight this behavior. People will be able to customize it, but not sure we need to document it before having feedbacks.

[LukasTy]

But right now, nobody translated them (because nobody uses the alpha 😆 )

The PR introducing it is #6337

Well, sorry for a dumb question then. I haven't reviewed the mentioned PR, that's why I was not aware of this detail. 🙈

EDIT: We could probably try to translate the languages we use in the localization doc, right now it can feel deceiving. And add a picker with no default value in the Set a custom local demo to highlight this behavior. People will be able to customize it, but not sure we need to document it before having feedbacks.

I do agree that this case of format localisation should be mentioned in the documentation. 🤔 Especially given the fact, that it is a new feature in v6.

[flaviendelangle]

No dumb question :angel: , we have so much going on, we all miss some

@Asghwor I hope this answer your question In v5 we basically can't do anything with the current implementation due to how the date-libraries (date-fns, dayjs, moment, luxon) behaves. In v6 it will work out of the box

[Asghwor]

@flaviendelangle No, I think that answers my question. Thanks for the help!

I managed to make it show the desired placeholder by using a replace('y', 'a') in the render component.

[is-paranoia]

@flaviendelangle No, I think that answers my question. Thanks for the help!

I managed to make it show the desired placeholder by using a replace('y', 'a') in the render component.

@Asghwor hello! I understand that it's been quite a while 😅. I need to implement a feature in one of our legacy projects, but we can't upgrade to a higher version. Could you explain how you did it with replace on version 5?

[LukasTy]

@is-paranoia could you clarify the version of the package you are trying to use? With the latest version (and v6.x if my memory serves me well) you can utilize the component localization to achieve the desired placeholder. In custom cases, if the values provided by the localization are insufficient, you can pass a custom localeText value for specific sections to achieve your result. 😉