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

Question

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

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

谢谢。

Answer 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

---

date-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