如何在材质 ui datepicker (MuiPickersUtilsProvider) 中使用语言环境？

Question

我正在使用dayjs在 js 中转换我的时间。

根据关于本地化的 material-ui-pickers页面，它给出了如何本地化日期选择器的示例。

但是没有运气尝试这个例子：

import React from "react";
import ReactDOM from "react-dom";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";
// import dayjs from 'dayjs';
import "dayjs/locale/nl";
import DayjsUtils from "@date-io/dayjs";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <MuiPickersUtilsProvider utils={DayjsUtils} locale="nl">
        <KeyboardDatePicker />
      </MuiPickersUtilsProvider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例：https : //codesandbox.io/s/clever-field-2gzmf

我还尝试了通用dayjs 文档 I18n 中描述的一些方法，这似乎也不起作用。

有人知道出了什么问题吗？我觉得这是一件小事。

---

经过进一步调查，似乎我对 dayjs 的实现是错误的，或者存在错误。因为瞬间 JS 正在工作，正如这个活生生的例子所示：https : //codesandbox.io/s/young-snow-ejinu

但是，另一方面，Datepicker 的演示页面也在使用 moment 并且不起作用：https : //material-ui-pickers.dev/localization/moment

Answer 1

请参阅我的组件示例，它与dayjs 的Locale一起工作正常。

import React from 'react';
import dayjs from 'dayjs';
import ptBR from 'dayjs/locale/pt-br';
import DayJsUtils from '@date-io/dayjs';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
  KeyboardDateTimePicker,
} from '@material-ui/pickers';

type DateTimeInputProps = {
  label: string;
  minDate?: Date;
  maxDate?: Date;
};

export const DateTimeInput = (props: DateTimeInputProps & any): JSX.Element => {
  const { label, minDate, maxDate, ...commomProps } = props;
  return (
    <MuiPickersUtilsProvider locale={ptBR} utils={DayJsUtils}>
      <KeyboardDateTimePicker
        autoOk
        className="dateTimeModalPicker"
        inputVariant="outlined"
        label={label}
        placeholder="ex: DD/MM/AAAA"
        format="DD/MM/YYYY HH:mm"
        ampm={false}
        invalidDateMessage="Data em formato inválido."
        minDate={minDate}
        maxDate={maxDate}
        minDateMessage={`A data deve ser maior que ${dayjs(minDate).format(
          'DD/MM/YYYY',
        )}.`}
        maxDateMessage={`A data deve ser menor do que ${dayjs(maxDate).format(
          'DD/MM/YYYY',
        )}.`}
        cancelLabel="Cancelar"
        {...commomProps}
      />
    </MuiPickersUtilsProvider>
  );
};

如果您使用 Date-Fns：

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