How to display start day of week as Wednesday in material-ui-pickers?

Question

How can I display start day of week as Wednesday in material-ui-pickers?

Currently, it is showing as Sunday as start day of week. How can we override that?

Thanks.

Answer 1

moment.js

moment.locale('en', { week: { dow: 3 } }) // 0-6 (Sunday-Saturday)

dow: day of week (https://github.com/moment/momentjs.com/issues/279)

Full example:

import React, { ReactElement, useEffect, useState } from 'react'
import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import MomentUtils from '@date-io/moment'
import moment from 'moment'
import 'moment/locale/de'

export const MomentPicker = (): ReactElement => {
    const [selectedDate, handleDateChange] = useState(new Date())

    useEffect(() => {
        moment.locale('de', { week: { dow: 3 } })
    }, [])

    return (
        <MuiPickersUtilsProvider utils={MomentUtils}>
            <DatePicker value={selectedDate} onChange={handleDateChange} />
        </MuiPickersUtilsProvider>
    )
}

https://material-ui-pickers.dev/localization/moment

---

date-fns

locale.options.weekStartsOn = 3 // 0-6 (Sunday-Saturday)
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>

Full example:

import React, { ReactElement, useState } from 'react'
import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import DateFnsUtils from '@date-io/date-fns'
import locale from 'date-fns/locale/en-US'

if (locale && locale.options) {
    locale.options.weekStartsOn = 3
}

export const DateFNSPicker = (): ReactElement => {
    const [selectedDate, handleDateChange] = useState(new Date())

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
            <DatePicker value={selectedDate} onChange={handleDateChange} />
        </MuiPickersUtilsProvider>
    )
}

https://material-ui-pickers.dev/localization/date-fns

Answer 2

I had to set the locale of LocalizationProvider to British.

import enLocale from 'date-fns/locale/en-GB';

...
  return (
      <LocalizationProvider locale={enLocale} ..>
        <CalendarPicker ... />
      </LocalizationProvider>
  );