[pickers] dateFormats doesn't work on weekday

[Mae623]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

This is the current weekdays text in Chinese on date picker. I try to use dateFormats, but it doesn't work.

Expected behavior 🤔

I want the weekdays text can be displayed as “ 日 一 二 三 四 五 六" or “ 一 二 三 四 五 六 日" , depending on the start day of the week. In fact, most of my users want the latter pattern. Thank you very much!

Steps to reproduce 🕹

Codesandbox : https://codesandbox.io/s/nervous-lalande-uj9h5s?file=/src/App.js

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 💳 (optional)

No response

[alexfauquette]

I'm sorry, I've no notion about Chinese so I may not fully understand your question

Displayed character

For the day header, we use getWeekdays() from the 'date-io' adapter and we display the first character in upper case

For moment.js this corresponds to moment.weekdaysShort(true)

From the returned value ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] I bet 周 means "day" and the second character is the week number 🕵

Since you only whant one character, you can get it with the folowing customization of moment.js

moment.updateLocale("zh-cn", {
  weekdaysShort: ["一", "二", "三", "四", "五", "六", "日"]
});

---

On our side, we should remove the 1 character limitation to be more flexible

Start date

The definition of what is a week is under the responsibility of your date library. For moment, you can have a look to dow (day of week) property: https://momentjs.com/docs/#/customization/dow-doy/

Example

https://codesandbox.io/s/eloquent-hill-0j5d86?file=/src/App.js

[Mae623]

moment.updateLocale("zh-cn", { weekdaysShort: ["一", "二", "三", "四", "五", "六", "日"] });

By using this way, my problem solved. Thank you very much!

From the returned value ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] I bet 周 means "day" and the second character is the week number 🕵

The second character is the week number , but "周" means "week".

On our side, we should remove the 1 character limitation to be more flexible

This change will be wisdom. For example, the Monday in Chinese not only can be translated to "周一", but also could be "星期一”. "星期" means "week" too.

[alexfauquette]

I just reopen the issue such that we can track improvements to do

• [x] Remove string slicing
• [x] Remove upper case
• [x] document calendar days customization

[flaviendelangle]

Related to https://github.com/mui/mui-x/pull/4472

[flaviendelangle]

@alexfauquette is this fixed by the new dayOfWeekFormatter prop ?

[alexfauquette]

Yes it is 🎉

[HoAnhVan]

For dayjs:

<DesktopDatePicker label="Date" dayOfWeekFormatter={(_, weekday:any)=> { return dayjs(weekday).format('dd'); }}/>