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:
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:
But, on the other hand, the demo page of the Datepicker is also using moment and that isn't working:
3 Answers
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";
@optimizitor When I tried this I got the error:
TS7016: Could not find a declaration file for module 'dayjs/locale/ru'.
So I made a small change (removed import ru) and everything works fine:
import 'dayjs/locale/ru';
import { ruRU } from '@mui/x-date-pickers/locales';
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale='ru'
localeText={ruRU.components.MuiLocalizationProvider.defaultProps.localeText}
>
<DatePicker />
</LocalizationProvider>
Here's the solution for <DatePicker /> using @mui/x-date-pickers v6.0.4 and dayjs v1.11.7 that worked for me (you should provide corresponding locales for both the component and its adapter to have full translation):
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import ru from 'dayjs/locale/ru';
import { ruRU } from '@mui/x-date-pickers/locales';
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={ru}
localeText={ruRU.components.MuiLocalizationProvider.defaultProps.localeText}
>
<DatePicker />
</LocalizationProvider>
