Search code examples
reactjsmaterial-uidatepicker

How to change months language in Mui MobileDatePicker?


Is there any way can change the months language in @mui/material MobileDatePicker?

like "Mar" change to "三月".

import "./styles.css";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import React from "react";
import TextField from "@mui/material/TextField";

export default function App() {
  const handleChangeDate = (newValue) => {
    console.log(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        views={["month", "year"]}
        inputFormat="yyyy-MM"
        inline={true}
        autoOk={true}
        label="label"
        value="2022/10"
        onChange={handleChangeDate}
        renderInput={(params) => (
          <TextField id="filled-basic" variant="standard" {...params} />
        )}
      />
    </LocalizationProvider>
  );
}

Also can run in this codesandbox:

https://codesandbox.io/s/nifty-meadow-wr3uzs?file=/src/App.js:0-875

Thank you!


Solution

  • use locale

    import { ja } from "date-fns/locale";
    
    
    <LocalizationProvider locale={ja} dateAdapter={AdapterDateFns}>