如何在材料-ui-pickers 中将星期几显示为星期三？答案

【问题标题】：How to display start day of week as Wednesday in material-ui-pickers?如何在材料-ui-pickers 中将星期几显示为星期三？
【发布时间】：2020-04-06 19:46:33
【问题描述】：

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

目前，它显示为星期日作为一周的开始日。我们如何覆盖它？

谢谢。

【问题讨论】：

标签： date material-ui momentjs

【解决方案1】：

moment.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

【讨论】：

【解决方案2】：

我必须将 LocalizationProvider 的语言环境设置为 British。

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

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

【讨论】：