CODEWITHSUNDEEP
reactjsmaterial-uidatepickermomentjs
jix
jix

Reputation: 123

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

Upvotes: 12

Views: 9366

Answers (4)

Kasun Shanaka
Kasun Shanaka

Reputation: 833

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"

Upvotes: 1

kaushalyap
kaushalyap

Reputation: 13657

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

Upvotes: 6

Titenis
Titenis

Reputation: 815

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

Upvotes: 5

maxencedhx
maxencedhx

Reputation: 91

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

Upvotes: 3

Related Questions