Setting DatePicker format to DD MMM YYYY but deleting the MMM will make the textfield shows MMMM (Long Month format)

[kianjunhen]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use the basic date picker
2. Make the format to 'DD MMM YYYY'
3. Select any date from Date Picker or enter from keyboard
4. Manual delete the MMM
5. The preview will show 'DD MMMM YYYY'

Current behavior 😯

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

That's the expected behavior. When a section is empty, it shows a placeholder which is not necessarily the format token. Here for month, the default is 4 letters for words and 2 letters for numbers

// From src/locales/enUS.ts
fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'),

You can modify this behavior by providing custom localeText:

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

This information could be added in the base concept pages

[kianjunhen]

Thanks Alex for the input, it works now.

[alexfauquette]

@flaviendelangle What do you think about?

This information could be added in the base concept pages

[flaviendelangle]

They are documented here

I think it's too specific to be in the Base concept

[alexfauquette]

Ok, it appears in algolia, so might be enough, will see it this issue arrive back

[AkshayHere]

That's the expected behavior. When a section is empty, it shows a placeholder which is not necessarily the format token. Here for month, the default is 4 letters for words and 2 letters for numbers

// From src/locales/enUS.ts
fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'),

You can modify this behavior by providing custom localeText:

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

This information could be added in the base concept pages

Any ideas on how to use the fieldMonthPlaceholder ?
There are no examples there where I can see how this is used.

[flaviendelangle]

You have the answer just above 👍

#8526 (comment)

And for a more in-depth explanation on how to pass locales to the grid: https://mui.com/x/react-date-pickers/localization/

[Shekiel]

@flaviendelangle I agree with @AkshayHere, could you please provide an example of how this can be used?

[LukasTy]

@Shekiel have you checked the 2nd code example in here?

[Shekiel]

@LukasTy Thanks, just checked checked this, and this worked for me: Changing the fieldMonthPlaceholder as shown in the example to get the correct format:
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb" localeText={{ fieldMonthPlaceholder: (params) => params.contentType === 'digit' ? 'MM' : params.format,}}>