Material UI日期选择器阿拉伯语支持问题求助

我来帮你搞定这个问题！你已经成功让星期和月份显示阿拉伯语了，但日期和年份数字还是保留了阿拉伯数字（也就是我们常用的0-9），这是因为date-fns的locale默认只处理文本类内容的本地化，不会自动转换数字系统，得咱们手动加一层处理逻辑来补全这个功能。

问题根源 #

date-fns的arSA locale主要负责翻译星期、月份名称这类文本内容，对于数字（比如2024要变成٢٠٢٤，5要变成٥），它并没有内置的转换逻辑，所以需要我们自定义工具类来实现数字的本地化替换。

解决方案：自定义DateFns工具类 #

我们可以继承DateFnsUtils，重写format方法来替换数字；如果需要支持用户手动输入阿拉伯数字，还要重写parse方法来完成反向解析。

1. 创建自定义工具类

新建一个文件比如CustomDateFnsUtils.js：

import DateFnsUtils from '@date-io/date-fns';
import { format, parse } from 'date-fns';

// 阿拉伯-Indic数字与标准数字的映射表
const arabicNumerals = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];

export default class CustomDateFnsUtils extends DateFnsUtils {
  // 重写format方法，将标准数字替换为阿拉伯-Indic数字
  format(date, formatStr) {
    const formattedText = format(date, formatStr, { locale: this.locale });
    // 遍历替换所有0-9的数字
    return formattedText.replace(/\d/g, digit => arabicNumerals[parseInt(digit, 10)]);
  }

  // 可选：支持用户手动输入阿拉伯数字时，反向转换为标准数字供date-fns解析
  parse(value, formatStr) {
    let parsedValue = value;
    // 仅在阿拉伯语环境下处理数字转换
    if (this.locale?.code === 'ar-SA') {
      parsedValue = parsedValue.replace(/[٠-٩]/g, arabicDigit => arabicNumerals.indexOf(arabicDigit).toString());
    }
    return super.parse(parsedValue, formatStr);
  }
}

2. 在组件中使用自定义工具类

修改你的导入和MuiPickersUtilsProvider的配置：

import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
import CustomDateFnsUtils from './CustomDateFnsUtils'; // 替换成你的文件实际路径
import { arSA, enGB } from 'date-fns/locale';

// ... 其他业务代码

<MuiPickersUtilsProvider utils={CustomDateFnsUtils} locale={language === 'ar' ? arSA : enGB}>
  <KeyboardDatePicker
    margin="normal"
    id="end-time-picker"
    label={language === 'ar' ? 'تاريخ الانتهاء' : 'End Date'} // 别忘了标签也做本地化哦
    value={endDate}
    onChange={handleEndDateChange}
    KeyboardButtonProps={{
      'aria-label': language === 'ar' ? 'تغيير الوقت' : 'change time',
    }}
    InputLabelProps={{
      className: classes.inputPropsTest,
    }}
    minDate={new Date()}
  />
</MuiPickersUtilsProvider>

额外提示 #

• 如果你同时使用KeyboardTimePicker，这个自定义工具类也能自动处理时间数字的转换，不用额外修改。
• 你的date-fns版本（v2.20.0）完全支持arSA locale，配置上没有问题。
• 建议把组件的标签、aria-label等文本也同步做阿拉伯语本地化，提升整体的用户体验。

这样处理后，日期、年份、时间的数字都会变成阿拉伯-Indic数字，就能实现完整的阿拉伯语本地化啦！

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