如何将ReactJS的MUI X Date Picker切换为阿拉伯语

MUI X日期选择器的本地化需要同时配置日期库的阿拉伯语locale和MUI组件的阿拉伯语文本，之前的无效情况大多是漏了其中一环，或是属性使用错误。以下是针对不同版本的具体解决方案：

针对v6版本（当前主流版本）的正确配置 #

1. 安装对应依赖

根据你使用的日期适配库，安装配套的locale包：

• 用date-fns：

  npm install @mui/x-date-pickers date-fns @date-fns/ar
  

• 用dayjs：

  npm install @mui/x-date-pickers dayjs
  

• 用luxon：

  npm install @mui/x-date-pickers luxon
  

2. 代码配置示例

基于date-fns的配置

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { arSA } from '@date-fns/ar';
import { ar } from '@mui/x-date-pickers/locales';

function YourDatePickerComponent() {
  return (
    <LocalizationProvider
      dateAdapter={AdapterDateFns}
      // 配置日期库的阿拉伯语locale，控制日期格式、星期/月份名称
      adapterLocale={arSA}
      // 配置MUI组件的阿拉伯语文本，控制按钮、提示语等
      localeText={ar.components.MuiLocalizationProvider.defaultProps.localeText}
    >
      {/* 此处放置你的DatePicker/DateTimePicker组件 */}
    </LocalizationProvider>
  );
}

基于dayjs的配置

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import 'dayjs/locale/ar';
import { ar } from '@mui/x-date-pickers/locales';

// 全局设置dayjs的默认locale
dayjs.locale('ar');

function YourDatePickerComponent() {
  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      localeText={ar.components.MuiLocalizationProvider.defaultProps.localeText}
    >
      {/* 此处放置你的DatePicker/DateTimePicker组件 */}
    </LocalizationProvider>
  );
}

常见错误排查 #

• 误用locale属性：v6版本的LocalizationProvider没有locale属性，正确的是用localeText传入MUI组件的本地化文本，adapterLocale（仅date-fns/luxon需要）传入日期库的locale。
• 未安装日期库的locale包：比如用date-fns却没装@date-fns/ar，会导致日期格式、月份名称仍为英文。
• theme配置无效：v6中theme的本地化配置优先级低于LocalizationProvider的localeText，如果同时配置会被覆盖，建议直接通过LocalizationProvider配置。

针对v5版本的配置 #

如果仍在使用v5，配置方式略有不同：

import { LocalizationProvider } from '@mui/lab';
import { AdapterDateFns } from '@mui/lab/AdapterDateFns';
import { arSA } from '@date-fns/ar';
import arLocale from '@mui/lab/locales/ar';

function YourDatePickerComponent() {
  return (
    <LocalizationProvider
      dateAdapter={AdapterDateFns}
      locale={arLocale}
      adapterLocale={arSA}
    >
      {/* 此处放置你的DatePicker/DateTimePicker组件 */}
    </LocalizationProvider>
  );
}

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