[pickers] Changing locale between a monday-first or sunday-first language breaks indicated order of weekdays

[dbarbosapn]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-xqjmtx?file=Demo.tsx

Steps:

1. See which day of the week 1st is. (e.g. in May 2024, it's on Wednesday)
2. Switch the language to "PT", on top.
3. Notice how 1st is now on a "Tuesday". Every day was shifted by 1, which completely messes up the calendar.

Current behavior

After the executing the steps, the calendar displays the month days in the wrong week days. Sounds like it's related to the fact that Portuguese has a Monday-first week and English has a Sunday-first week.

Expected behavior

Days should not be inaccurate after switching languages. The same issue can be reproduced with DateCalendar, for example.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 18.16.0 - D:\nodejs\node.EXE npm: 9.8.0 - D:\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (123.0.2420.97) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/material: ^5.15.15 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-date-pickers: ^7.3.1 => 7.3.1 @types/react: ^18.2.15 => 18.2.22 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: 5.3.11 typescript: ^5.0.2 => 5.2.2 ```

Search keywords: locale, static-date-picker

[michelengelen]

OK, I can confirm this. It seems as if the order of the weekday indicators above the calendar are not updated when switching locales. If you switch up the initial locale to 'pt' it will start with the monday as first day of the week and when switching to 'en' it will stay that way, but update the dates anyways.

[michelengelen]

For some reason the locale does not get applied like it should be. We apparently did it right on the getWeekArray method, but not on the startOfWeek method.

To fix this here is a diff to get it started:

diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
index 6550ba949..7fe0e294c 100644
--- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
+++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
@@ -390,7 +390,8 @@ export class AdapterMoment implements MuiPickersAdapter<Moment, string> {
   };

   public startOfWeek = (value: Moment) => {
-    return value.clone().startOf('week');
+    const cleanValue = this.setLocaleToValue(value.clone());
+    return cleanValue.clone().startOf('week');
   };

   public startOfDay = (value: Moment) => {

This might need to be applied to other methods as well, so consider this the spark for a fix.

Could we open this up as a good first issue @LukasTy ?

[dbarbosapn]

I'd be very happy to contribute if needed, with some guidance 👍

Thanks a lot for the triage @michelengelen !

[LukasTy]

@dbarbosapn @michelengelen Am I missing something or does it work as expected? 🤔 Switching to the pt locale changes the first week of the day to Monday and correctly shows it represented in both the calendar and week day headers.

https://github.com/mui/mui-x/assets/4941090/672f60e8-9af4-40f5-8154-155450288ab3

Here are the localized weekday labels for reference, which we take first letters from to build the headers:

https://github.com/moment/moment/blob/18aba135ab927ffe7f868ee09276979bed6993a6/src/locale/pt.js#L16

[dbarbosapn]

Hey @LukasTy ,

"T" in Portuguese stands for "Terça-feira" which is "Tuesday". So basically 1st of May became Tuesday on Portuguese, but it's a wednesday.

TL;DR The days got shifted by 1 ✔️ The labels were translated ✔️ The labels were shifted by 1 ❌ - ◀️ This is what's missing. The "first day of the week" is not being updated on locale change.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@dbarbosapn: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.