reactjsmaterial-uidatepickermomentjs

DatePicker MUI how to make weeks starting with Monday


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


Solution

  • 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