React DatePicker配置ar-SA locale无法实现完整阿拉伯语支持求助

1. 安装必要依赖 #

react-datepicker依赖date-fns处理本地化逻辑，需安装核心依赖及对应阿拉伯语沙特阿拉伯locale包：

npm install react-datepicker date-fns @date-fns/locale
# 或使用yarn
yarn add react-datepicker date-fns @date-fns/locale

2. 导入并配置locale对象 #

直接传入字符串"ar-SA"不会生效，必须导入date-fns提供的ar-SA locale对象并传入组件：

• 若使用date-fns v3+：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { arSA } from "@date-fns/locale";

function App() {
  return (
    <DatePicker
      locale={arSA}
      dateFormat="dd/MM/yyyy"
      selected={new Date()}
      popperPlacement="top-end"
      onChange={(date) => alert(date)}
    />
  );
}

export default App;

• 若使用date-fns v2：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import arSA from "date-fns/locale/ar-SA";

function App() {
  return (
    <DatePicker
      locale={arSA}
      dateFormat="dd/MM/yyyy"
      selected={new Date()}
      popperPlacement="top-end"
      onChange={(date) => alert(date)}
    />
  );
}

export default App;

3. 确保文本与数字完全阿拉伯化 #

配置后date-fns的ar-SA locale会自动完成：

• 月份、星期名称转为阿拉伯语
• 日期数字转换为阿拉伯-Indic数字（如١٢/٠٥/٢٠٢٤）
  若需更贴合本地化的格式，可使用date-fns内置的本地化格式符，比如PP：

dateFormat="PP"

4. 结合react-intl的自定义输入框方案（可选） #

如果项目已使用react-intl，可自定义输入框用FormattedDate渲染阿拉伯语日期：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { arSA } from "@date-fns/locale";
import { FormattedDate, IntlProvider } from "react-intl";
import { useState } from "react";

function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <IntlProvider locale="ar-SA">
      <DatePicker
        locale={arSA}
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        popperPlacement="top-end"
        customInput={
          <FormattedDate
            value={selectedDate}
            day="2-digit"
            month="2-digit"
            year="numeric"
          />
        }
      />
    </IntlProvider>
  );
}

export default App;

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