如何在Angular项目中实现ng-bootstrap DatePicker的阿拉伯语国际化？

我刚帮团队完成过类似的配置，给你一步步拆解怎么做：

1. 准备基础依赖与Locale数据 #

首先确保你的项目已经安装了@ng-bootstrap/ng-bootstrap，然后需要引入Angular的阿拉伯语Locale数据。在你的根模块（比如app.module.ts）里做以下操作：

• 导入registerLocaleData和阿拉伯语Locale：

import { registerLocaleData } from '@angular/common';
import arLocale from '@angular/common/locales/ar';

• 注册Locale数据：

registerLocaleData(arLocale);

2. 配置全局Locale ID #

在根模块的providers数组里，设置默认的Locale为阿拉伯语：

import { LOCALE_ID } from '@angular/core';

@NgModule({
  // ...其他配置
  providers: [
    { provide: LOCALE_ID, useValue: 'ar' },
    // 后续还要加自定义的Datepicker I18n服务
  ]
})
export class AppModule { }

3. 自定义ng-bootstrap Datepicker的阿拉伯语I18n服务 #

ng-bootstrap的Datepicker需要专门的I18n服务来处理月份、星期等文本的翻译。我们需要创建一个自定义类继承NgbDatepickerI18n：

创建一个新文件，比如ngb-datepicker-i18n-arabic.ts：

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

// 阿拉伯语的月份、星期等文本
const AR_MONTHS = [
  'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
  'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
];
const AR_MONTHS_SHORT = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
const AR_WEEKDAYS_SHORT = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
const AR_WEEKDAYS_FULL = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];

export class NgbDatepickerI18nArabic extends NgbDatepickerI18n {
  getWeekdayShortName(weekday: number): string {
    return AR_WEEKDAYS_SHORT[weekday - 1];
  }

  getMonthShortName(month: number): string {
    return AR_MONTHS_SHORT[month - 1];
  }

  getMonthFullName(month: number): string {
    return AR_MONTHS[month - 1];
  }

  getDayAriaLabel(date: { year: number; month: number; day: number }): string {
    return `${date.day} ${AR_MONTHS[date.month - 1]} ${date.year}`;
  }

  // 可选：自定义"今天"按钮的文本
  getTodayLabel(): string {
    return 'اليوم';
  }
}

然后回到根模块，把这个自定义服务注册为NgbDatepickerI18n的提供者：

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { NgbDatepickerI18nArabic } from './ngb-datepicker-i18n-arabic';

@NgModule({
  // ...其他配置
  providers: [
    { provide: LOCALE_ID, useValue: 'ar' },
    { provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nArabic }
  ]
})
export class AppModule { }

4. 处理RTL（从右到左）布局 #

阿拉伯语是RTL语言，所以需要调整Datepicker的布局方向。你可以有两种方式：

• 全局设置：在styles.css或styles.scss里添加：

.ngb-dp-popup {
  direction: rtl;
}

• 组件内设置：在使用Datepicker的组件模板里，给容器加上dir="rtl"属性：

<div dir="rtl">
  <input ngbDatepicker #d="ngbDatepicker" />
  <button (click)="d.toggle()">اختر التاريخ</button>
</div>

5. 验证效果 #

现在运行你的项目，打开Datepicker应该就能看到：

• 月份、星期都是阿拉伯语文本
• 布局从右到左排列
• "今天"按钮显示为"اليوم"

如果需要调整日期格式（比如显示为日/月/年），可以在自定义的I18n类里重写parse和format方法，或者在Datepicker的输入属性里设置[format]="'dd/MM/yyyy'"。

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