Merge pull request #24194 from abpframework/issue-#20992

Add custom i18n adapter for ng-bootstrap datepicker

Author: yagmurcelk

npm/ng-packs/packages/theme-shared/src/lib/adapters/datepicker-i18n.adapter.ts

@@ -0,0 +1,38 @@
+import { formatDate } from '@angular/common';
+import { inject, Injectable, LOCALE_ID } from '@angular/core';
+import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { ConfigStateService } from '@abp/ng.core';
+
+@Injectable()
+export class DatepickerI18nAdapter extends NgbDatepickerI18n {
+  private configState = inject(ConfigStateService, { optional: true });
+  private defaultLocale = inject(LOCALE_ID);
+
+  private get locale(): string {
+    return this.configState?.getDeep('localization.currentCulture.cultureName') || this.defaultLocale;
+  }
+
+  getWeekdayLabel(weekday: number): string {
+    const date = new Date(2017, 0, weekday + 1); // Monday = 1
+    return formatDate(date, 'EEEEE', this.locale);
+  }
+
+  getWeekLabel(): string {
+    return '';
+  }
+
+  getMonthShortName(month: number): string {
+    const date = new Date(2017, month - 1, 1);
+    return formatDate(date, 'MMM', this.locale);
+  }
+
+  getMonthFullName(month: number): string {
+    const date = new Date(2017, month - 1, 1);
+    return formatDate(date, 'MMMM', this.locale);
+  }
+
+  getDayAriaLabel(date: NgbDateStruct): string {
+    const d = new Date(date.year, date.month - 1, date.day);
+    return formatDate(d, 'fullDate', this.locale);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/adapters/index.ts

@@ -1,3 +1,5 @@
 export * from './date-time.adapter';
 export * from './date.adapter';
+export * from './datepicker-i18n.adapter';
 export * from './time.adapter';
+export * from './timepicker-i18n.adapter';

npm/ng-packs/packages/theme-shared/src/lib/adapters/timepicker-i18n.adapter.ts

@@ -0,0 +1,24 @@
+import { formatDate } from '@angular/common';
+import { inject, Injectable, LOCALE_ID } from '@angular/core';
+import { NgbTimepickerI18n } from '@ng-bootstrap/ng-bootstrap';
+import { ConfigStateService } from '@abp/ng.core';
+
+@Injectable()
+export class TimepickerI18nAdapter extends NgbTimepickerI18n {
+  private configState = inject(ConfigStateService, { optional: true });
+  private defaultLocale = inject(LOCALE_ID);
+
+  private get locale(): string {
+    return this.configState?.getDeep('localization.currentCulture.cultureName') || this.defaultLocale;
+  }
+
+  getMorningPeriod(): string {
+    const date = new Date(2000, 0, 1, 10, 0, 0);
+    return formatDate(date, 'a', this.locale);
+  }
+
+  getAfternoonPeriod(): string {
+    const date = new Date(2000, 0, 1, 22, 0, 0);
+    return formatDate(date, 'a', this.locale);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/providers/ng-bootstrap-config.provider.ts

@@ -1,7 +1,16 @@
 import { inject, provideAppInitializer } from '@angular/core';
-import { NgbInputDatepickerConfig, NgbTypeaheadConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerI18n, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbTimepickerI18n } from '@ng-bootstrap/ng-bootstrap';
+import { DatepickerI18nAdapter, TimepickerI18nAdapter } from '../adapters';
 
 export const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
+  {
+    provide: NgbDatepickerI18n,
+    useClass: DatepickerI18nAdapter,
+  },
+  {
+    provide: NgbTimepickerI18n,
+    useClass: TimepickerI18nAdapter,
+  },
   provideAppInitializer(() => {
     configureNgBootstrap();
   }),