Как я могу изменить язык пользовательского интерфейса выбора даты и часовой пояс по умолчанию?

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

с моментом.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

Другое решение - использовать date-fns в дополнение к решению @Shikyo:

      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.dev/api/DatePicker.

<DatePicker
    okLabel="Text"
    clearLabel="Text"
    cancelLabel="Text"
    ...
/>

Answer 5

Вы должны импортировать локали в зависимости от адаптера, вот возможное решение с dayjs в документации Material UI:

https://mui.com/x/реакт-дата-выборщики/локализация/

Answer 6

«локаль» устарела. используйте это вместо этого:

      import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { deDE } from '@mui/x-date-pickers/locales';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<LocalizationProvider
  localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
>
  <DatePicker />
</LocalizationProvider>;

Answer 7

Следующая страница документа выглядит так, как вы хотите: https://material-ui-pickers.firebaseapp.com/localization/date-fns

На этой странице есть пример изменения локали с помощью пункта меню. В частности, если вы хотите предоставить только один язык, вы можете пропустить locale в компонент MuiPickersUtilsProvider,