Question

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

根据material-ui-pickers regarding localization上的页面，提供了有关如何本地化日期选择器的示例。

但是没有运气尝试该示例：

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 documentation I18n中描述的一些方法，但这些方法似乎也不起作用。

有人知道做错了什么吗？我觉得这很琐碎。

经过进一步调查，似乎我的dayjs实现不正确或存在错误。因为此刻示例显示了JS正在工作，所以https://codesandbox.io/s/young-snow-ejinu

但是，另一方面，Datepicker的演示页面也正在使用动量，并且无法正常工作：https://material-ui-pickers.dev/localization/moment

Answer 1

请参阅我的组件示例，它可以与 dayjs 的区域设置配合使用。

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";

如何在重要的ui日期选择器（MuiPickersUtilsProvider）中使用语言环境？

1 个答案: