如何更改 Material ui datepicker 语言和默认时区？

Question

如何更改 Material-UI 日期选择器的语言？它似乎并不完全适用于整个日期选择器。

我当前的日期选择器是什么样的：

Answer 1

如果您使用 day.js 适配器

import "dayjs/locale/es";
import "dayjs/locale/en";

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
or
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">

与 i18

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale= 
{i18n?.language}>

使用 moment.js

import 'moment/locale/es'
import 'moment/locale/en'

Answer 2

@MUI5解决方案

import * as React from 'react';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import {es} from 'date-fns/locale'
import {TextField} from "@mui/material";

export const MyDatePicker = () => {
  const [value, setValue] = React.useState(new Date())
  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return (
    <LocalizationProvider locale={es} dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Date desktop"
        inputFormat="dd-MMMM-yyyyy"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  )
}

Answer 3

另一种解决方案是除了 @Shikyo 解决方案之外还使用date-fns：：

import DateFnsUtils from "@date-io/date-fns";
import { fr } from "date-fns/locale";

<MuiPickersUtilsProvider locale={fr} utils={DateFnsUtils}>
...
</MuiPickersUtilsProvider>

Answer 4

文档的以下页面看起来应该是您想要的：https ://material-ui-pickers.firebaseapp.com/localization/date-fns

此页面有一个使用菜单项更改区域设置的示例。具体来说，如果您只想提供一种语言环境，您可以将 prop 传递locale到组件中MuiPickersUtilsProvider。