如何在material-ui-pickers中将星期几显示为星期三？

Question

如何在 material-ui-pickers 中将星期几显示为星期三？

目前，它显示为星期日作为一周的开始日。我们怎样才能覆盖它？

谢谢。

Answer 1

时刻.js

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

dow：星期几（https://github.com/moment/momentjs.com/issues/279）

完整示例：

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

日期-fns

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

完整示例：

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

我必须将 LocalizationProvider 的区域设置设置为英国。

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

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