How to use locale in material ui datepicker (MuiPickersUtilsProvider)?

Question

I am using dayjs to convert my times in js.

According to the page on material-ui-pickers regarding localization it gives an example on how to localize the date picker.

But no luck trying that example:

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

Working example: https://codesandbox.io/s/clever-field-2gzmf

I also tried some methods as described in the generic dayjs documentation I18n, which also does not seem to work.

Does someone have an idea what's doing wrong? I feel it's something trivial.

---

After some further investigation it seems that either my implementation of dayjs is wrong, or there is a bug. Because moment JS is working, as this live example shows: https://codesandbox.io/s/young-snow-ejinu

But, on the other hand, the demo page of the Datepicker is also using moment and that isn't working: https://material-ui-pickers.dev/localization/moment

Answer 1

See my component example, its work fine with Locale of 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>
  );
};

if you use Date-Fns:

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