如何修改Mui MobileDatePicker中的月份显示语言？

当然可以修改，你当前使用AdapterDateFns作为日期适配器，只需配置date-fns的中文本地化规则，就能实现月份显示为中文（如将“Mar”改为“三月”）。具体操作如下：

1. 引入date-fns中文语言包
   从@date-fns/locale中导入中文本地化模块：

import { zhCN } from '@date-fns/locale'

2. 配置LocalizationProvider的本地化属性
   在LocalizationProvider组件中添加adapterLocale属性，传入刚才导入的zhCN：

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={zhCN}>

3. 修正日期值格式（可选但推荐）
   原代码中value使用字符串格式可能导致适配问题，建议改为Date对象：

value={new Date("2022/10")}

修改后的完整代码 #

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 { zhCN } from '@date-fns/locale';
import React from "react";
import TextField from "@mui/material/TextField";

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

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

完成以上修改后，日期选择器中的月份就会显示为中文名称，比如用“三月”替代“Mar”。

内容的提问来源于stack exchange，提问作者MOLLY