DatePicker MUI how to make weeks starting with Monday

Question

I'm using DatePicker from MUI v6 (https://mui.com/x/react-date-pickers/date-picker/). And currently I've noticed that weeks in the calendar start with Sunday but I need them to start with Monday. Any help would be really appreaciated because I haven't found any soluction for this problem on the internet (only solutions for old versions).
As a localizator I use moment.js

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import moment from 'moment';

...

<LocalizationProvider dateAdapter={AdapterMoment}>

...

<DatePicker 
    name="date"
    value={dateValue}
    format="DD/MM/YYYY"
    onChange={(newValue) => {   
        setDateValue(newValue); 
        setFieldValue('date', dateValue.toDate());
    }}
    slotProps={{
        textField: { size: 'small' },
        previousIconButton: { color: 'secondary' },
        nextIconButton: { color: 'secondary' },
        openPickerButton: { color: 'secondary' },
    }}
    dayOfWeekFormatter={(day) => `${day}`}
    calendarStartDay={1}
/>

Here is what my calendar looks like: https://i.sstatic.net/2vO43.png

Caulis

Answer 1

As I can see in the doc it is not supported now.

But you can tweak it by changing moment's first day of week

moment.updateLocale("en", {
  week: {
    dow: 1
  }
});

https://codesandbox.io/s/infallible-tree-d6b0je

For reference https://github.com/mui/mui-x/issues/7670

Megaton

Unfortunately I've already tried this and it doesn't work the way it should. It realy does change the first day of week on the top of the calendar but the dates are remaining where they were so the stay on incorrect positions. For example if it's Saturday 15 today and I use this method to change the first day then it becomes Sunday 15 (only weekday namings move but not the dates for some reason :C ) – Caulis

But I see it works in your example and I don't understand why it doesn't work for the proper way :o – Caulis

Well I have no clue why it is the way it is but now it works for me even though I'm pretty sure it really worked as I described earlier. Thank you a lot for making me try this again and for showing that it works as expected in your example so it forced me to try again! – Caulis

I had exactly the same issue. I think it's something with repeated calls to this method. It did not work (as you described) when called inside render() method or inside functional component, but when moved into constructor of component it worked as expected. – Sian

Answer 2

For date-fns you can set global default locale as enGB:

import { setDefaultOptions } from 'date-fns';
import { enGB } from 'date-fns/locale';

setDefaultOptions({ locale: enGB });

According to https://date-fns.org/docs/Locale

Default locale is en-US.

Thats why first day is sunday

Trusting

This also works and doesn't change the rest of the locale settings: setDefaultOptions({ weekStartsOn: 1 }); – Flyn

Answer 3

For those who use dayjs you can do following

import dayjs from 'dayjs'
import updateLocale from 'dayjs/plugin/updateLocale'

dayjs.extend(updateLocale)
dayjs.updateLocale('en', {
    weekStart: 1,
})

Credits : https://github.com/iamkun/dayjs/issues/215#issuecomment-1139442389

Docs : https://day.js.org/docs/en/customization/customization

Priesthood

Answer 4

For Luxon

To change the start day in a Material-UI DatePicker with Luxon, configure Luxon's Settings.defaultWeekSettings like this:

import { Settings } from 'luxon';

// Configure Luxon to chnage the first day of the week
Settings.defaultWeekSettings = {
  firstDay: 1,         // Set the first day of the week
  minimalDays: 4,      // minimum number of days required in the first week of the year for it to be considered as week 1
  weekend: [6, 7]      // Set weekend days
};

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DatePicker label="Basic date picker" />
    </LocalizationProvider>
  );
}

export default App;

This might not work with older versions of luxon.

Versions that I'm using

"luxon": "^3.4.4"

"@types/luxon": "^3.4.2"

Ralina