如何在NextUI DatePicker中实现波斯（Shamsi）日历？

NextUI的DatePicker基于@react-aria/i18n和@internationalized/date，这两个库原生支持波斯日历系统，无需额外引入第三方依赖。以下是具体实现方案：

核心调整点 #

1. 移除冗余的moment-jalaali依赖，改用官方库的原生能力
2. 正确配置本地化环境，指定波斯语+波斯日历
3. 使用专用的波斯日期类型处理日期逻辑
4. 修复日期可用性判断的跨日历转换问题

完整示例代码 #

import styles from "./CustomDatePicker.module.css";
import { DatePicker, DateValue } from "@nextui-org/react";
import { useEffect, useState } from "react";
import { getLocalTimeZone, today, PersianCalendarDate, toAbsolute } from "@internationalized/date";
import { I18nProvider } from "@react-aria/i18n";

// 计算两个波斯日期的天数差
function getDifferenceInDays(date1: PersianCalendarDate, date2: PersianCalendarDate): number {
  const abs1 = toAbsolute(date1, getLocalTimeZone());
  const abs2 = toAbsolute(date2, getLocalTimeZone());
  return Math.round((abs2 - abs1) / (1000 * 60 * 60 * 24));
}

function CustomDatePicker({ onValueChange }: { onValueChange: (date: DateValue) => void }) {
  // 直接获取当前波斯日历日期
  const [date, setDate] = useState<DateValue>(today(getLocalTimeZone(), 'persian'));

  useEffect(() => {
    onValueChange(date);
  }, [date]);

  return (
    <div className="w-full" style={{ direction: "rtl" }}>
      {/* 配置波斯语+波斯日历的本地化环境 */}
      <I18nProvider locale="fa-IR-u-ca-persian">
        <DatePicker
          label={'تاریخ پیشنهادی کلاس'}
          value={date}
          granularity="day"
          minValue={today(getLocalTimeZone(), 'persian')}
          onChange={setDate}
          isDateUnavailable={(targetDate) => {
            // 确保操作的是波斯日期类型
            if (!(targetDate instanceof PersianCalendarDate)) return false;
            const currentPersianDate = today(getLocalTimeZone(), 'persian');
            const diffDays = getDifferenceInDays(currentPersianDate, targetDate);
            // 保留原逻辑：偶数天不可用
            return diffDays % 2 === 0;
          }}
          classNames={{
            calendar: styles.calendar,
            label: "text-end"
          }}
        />
      </I18nProvider>
    </div>
  );
}

export default CustomDatePicker;

关键细节说明 #

• Locale配置：fa-IR-u-ca-persian中，fa-IR指定波斯语（伊朗），u-ca-persian强制启用波斯日历系统，@react-aria会自动加载对应的月份名称和日期规则。
• 日期类型：使用PersianCalendarDate确保所有日期计算都在波斯日历体系内进行，避免跨日历转换导致的错误。
• 排版方向：设置direction: "rtl"符合波斯语从右到左的排版习惯，提升交互体验。

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