CODEWITHSUNDEEP
javascriptreactjstimematerial-uidate-fns
Rahil Ali
Rahil Ali

Reputation: 386

Change name of month in Material Ui React

I use DatePicker from Material Ui. I need to change the name of the month. How can I do it?

For example, I have to change from August to Avqust or from March to Mart enter image description here

My code:

             <LocalizationProvider dateAdapter={AdapterDateFns}>
                <DatePicker
                  label=""
                  value={selectedDate}
                  minDate={"02-01-1920"}
                  maxDate={"02-29-2020"}
                  onChange={(newValue) => {
                    setSelectedDate(newValue);
                  }}
                  renderInput={(params) => <TextField {...params} />}
                />
              </LocalizationProvider>

Upvotes: 0

Views: 3787

Answers (1)

Amr Eraky
Amr Eraky

Reputation: 1771

You can use local prop of LocalizationProvider, to change the language of DatePicker's days and months. change the locale for the date-fns adapter.

From Documentation of Mui: https://mui.com/components/date-picker/#localization

import { az } from "date-fns/locale";

<LocalizationProvider dateAdapter={AdapterDateFns} locale={az}>
   <DatePicker
      label=""
      value={selectedDate}
      minDate={new Date("02-01-1920")}
      maxDate={new Date("02-29-2020")}
      onChange={(newValue) => {
         setSelectedDate(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
   />
</LocalizationProvider>

https://codesandbox.io/s/localizeddatepicker-material-demo-forked-uppsz8?file=/demo.js

Update June 2023

Change local using dayjs in MUI new version:

import * as React from "react";
import dayjs from "dayjs";
import "dayjs/locale/az";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

export default function LocalizationDayjs() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="az">
      <DatePicker label="Date" defaultValue={dayjs("2022-04-17")} />
    </LocalizationProvider>
  );
}

https://codesandbox.io/s/agitated-nova-tp7zsf?file=/demo.tsx

Upvotes: 2

Related Questions