feat(datepicker): allow overriding month label correctly (#4023)

- introduces a new `getMonthLabel(date: NgbDateStruct): string` method to datepicker i18n
- makes default i18n datepicker implementation accessible publicly

Fixes #3863

src/datepicker/datepicker-i18n.ts

@@ -52,6 +52,15 @@ export abstract class NgbDatepickerI18n {
    */
   abstract getMonthFullName(month: number, year?: number): string;
 
+  /**
+   * Returns the text label to display above the day view.
+   *
+   * @since 9.1.0
+   */
+  getMonthLabel(date: NgbDateStruct): string {
+    return `${this.getMonthFullName(date.month, date.year)} ${this.getYearNumerals(date.year)}`;
+  }
+
   /**
    * Returns the value of the `aria-label` attribute for a specific date.
    *
@@ -81,11 +90,17 @@ export abstract class NgbDatepickerI18n {
   getYearNumerals(year: number): string { return `${year}`; }
 }
 
+/**
+ * A service providing default implementation for the datepicker i18n.
+ * It can be used as a base implementation if necessary.
+ *
+ * @since 9.1.0
+ */
 @Injectable()
 export class NgbDatepickerI18nDefault extends NgbDatepickerI18n {
-  private _weekdays: Array<string>;
-  private _monthsShort: ReadonlyArray<string>;
-  private _monthsFull: ReadonlyArray<string>;
+  private _weekdays: readonly string[];
+  private _monthsShort: readonly string[];
+  private _monthsFull: readonly string[];
 
   constructor(
       @Inject(LOCALE_ID) private _locale: string,

src/datepicker/datepicker-integration.spec.ts

@@ -113,6 +113,40 @@ describe('ngb-datepicker integration', () => {
     });
   });
 
+  describe('i18n-month-label', () => {
+
+    @Injectable()
+    class CustomI18n extends NgbDatepickerI18nDefault {
+      getMonthLabel(date: NgbDateStruct): string { return `${date.month}-${date.year}`; }
+    }
+
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+      TestBed.overrideComponent(TestComponent, {
+        set: {
+          template: `
+            <ngb-datepicker [startDate]="{year: 2018, month: 1}"
+                            [minDate]="{year: 2017, month: 1, day: 1}"
+                            [maxDate]="{year: 2019, month: 12, day: 31}"
+                            [showWeekNumbers]="true"
+                            [displayMonths]="2"
+            ></ngb-datepicker>`,
+          providers: [{provide: NgbDatepickerI18n, useClass: CustomI18n}]
+        }
+      });
+
+      fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+    });
+
+    it('should allow overriding month labels', () => {
+      const monthNameElements = fixture.nativeElement.querySelectorAll('.ngb-dp-month-name');
+      const monthNames = Array.from(monthNameElements).map((o: HTMLElement) => o.innerText.trim());
+      expect(monthNames).toEqual(['1-2018', '2-2018']);
+    });
+  });
+
   describe('keyboard service', () => {
 
     @Injectable()

src/datepicker/datepicker.module.ts

@@ -23,7 +23,7 @@ export {NgbDatepickerNavigation} from './datepicker-navigation';
 export {NgbDatepickerNavigationSelect} from './datepicker-navigation-select';
 export {NgbDatepickerConfig} from './datepicker-config';
 export {NgbInputDatepickerConfig} from './datepicker-input-config';
-export {NgbDatepickerI18n} from './datepicker-i18n';
+export {NgbDatepickerI18n, NgbDatepickerI18nDefault} from './datepicker-i18n';
 export {NgbDateStruct} from './ngb-date-struct';
 export {NgbDate} from './ngb-date';
 export {NgbDateAdapter} from './adapters/ngb-date-adapter';

src/datepicker/datepicker.ts

@@ -132,7 +132,7 @@ export class NgbDatepickerContent {
     <ng-template #defaultContentTemplate>
       <div *ngFor="let month of model.months; let i = index;" class="ngb-dp-month">
         <div *ngIf="navigation === 'none' || (displayMonths > 1 && navigation === 'select')" class="ngb-dp-month-name">
-          {{ i18n.getMonthFullName(month.number, month.year) }} {{ i18n.getYearNumerals(month.year) }}
+          {{ i18n.getMonthLabel(month.firstDate) }}
         </div>
         <ngb-datepicker-month [month]="month.firstDate"></ngb-datepicker-month>
       </div>

src/index.ts

@@ -61,6 +61,7 @@ export {
   NgbInputDatepickerConfig,
   NgbDatepickerContent,
   NgbDatepickerI18n,
+  NgbDatepickerI18nDefault,
   NgbDatepickerI18nHebrew,
   NgbDatepickerKeyboardService,
   NgbDatepickerModule,