diff --git a/src/datepicker/datepicker-i18n.ts b/src/datepicker/datepicker-i18n.ts index ff29bb2a9a..cc1dc36d89 100644 --- a/src/datepicker/datepicker-i18n.ts +++ b/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; - private _monthsShort: ReadonlyArray; - private _monthsFull: ReadonlyArray; + private _weekdays: readonly string[]; + private _monthsShort: readonly string[]; + private _monthsFull: readonly string[]; constructor( @Inject(LOCALE_ID) private _locale: string, diff --git a/src/datepicker/datepicker-integration.spec.ts b/src/datepicker/datepicker-integration.spec.ts index a83e7aab4f..c659df4a7e 100644 --- a/src/datepicker/datepicker-integration.spec.ts +++ b/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; + + beforeEach(() => { + TestBed.overrideComponent(TestComponent, { + set: { + template: ` + `, + 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() diff --git a/src/datepicker/datepicker.module.ts b/src/datepicker/datepicker.module.ts index d7154fbbb6..77350273ed 100644 --- a/src/datepicker/datepicker.module.ts +++ b/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'; diff --git a/src/datepicker/datepicker.ts b/src/datepicker/datepicker.ts index 254a1c504c..2b8d1b3f0b 100644 --- a/src/datepicker/datepicker.ts +++ b/src/datepicker/datepicker.ts @@ -132,7 +132,7 @@ export class NgbDatepickerContent {
- {{ i18n.getMonthFullName(month.number, month.year) }} {{ i18n.getYearNumerals(month.year) }} + {{ i18n.getMonthLabel(month.firstDate) }}
diff --git a/src/index.ts b/src/index.ts index c4f8bc1355..80a6f48bb3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -61,6 +61,7 @@ export { NgbInputDatepickerConfig, NgbDatepickerContent, NgbDatepickerI18n, + NgbDatepickerI18nDefault, NgbDatepickerI18nHebrew, NgbDatepickerKeyboardService, NgbDatepickerModule,