feat(datepicker): add full month name versions to i18n

BREAKING CHANGES: `NgbDatepickerI18n` methods renamed

`getWeekdayName` to `getWeekdayShortName`
`getMonthName` to `getMonthShortName`

Closes #1217

demo/src/app/components/datepicker/demos/i18n/datepicker-i18n.ts

@@ -26,12 +26,15 @@ export class CustomDatepickerI18n extends NgbDatepickerI18n {
     super();
   }
 
-  getWeekdayName(weekday: number): string {
+  getWeekdayShortName(weekday: number): string {
     return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
   }
-  getMonthName(month: number): string {
+  getMonthShortName(month: number): string {
     return I18N_VALUES[this._i18n.language].months[month - 1];
   }
+  getMonthFullName(month: number): string {
+    return this.getMonthShortName(month);
+  }
 }
 
 @Component({

src/datepicker/datepicker-i18n.spec.ts

@@ -4,18 +4,25 @@ describe('ngb-datepicker-i18n-default', () => {
 
   const i18n = new NgbDatepickerI18nDefault();
 
-  it('should return month name', () => {
-    expect(i18n.getMonthName(0)).toBe(undefined);
-    expect(i18n.getMonthName(1)).toBe('Jan');
-    expect(i18n.getMonthName(12)).toBe('Dec');
-    expect(i18n.getMonthName(13)).toBe(undefined);
+  it('should return abbreviated month name', () => {
+    expect(i18n.getMonthShortName(0)).toBe(undefined);
+    expect(i18n.getMonthShortName(1)).toBe('Jan');
+    expect(i18n.getMonthShortName(12)).toBe('Dec');
+    expect(i18n.getMonthShortName(13)).toBe(undefined);
+  });
+
+  it('should return wide month name', () => {
+    expect(i18n.getMonthFullName(0)).toBe(undefined);
+    expect(i18n.getMonthFullName(1)).toBe('January');
+    expect(i18n.getMonthFullName(12)).toBe('December');
+    expect(i18n.getMonthFullName(13)).toBe(undefined);
   });
 
   it('should return weekday name', () => {
-    expect(i18n.getWeekdayName(0)).toBe(undefined);
-    expect(i18n.getWeekdayName(1)).toBe('Mo');
-    expect(i18n.getWeekdayName(7)).toBe('Su');
-    expect(i18n.getWeekdayName(8)).toBe(undefined);
+    expect(i18n.getWeekdayShortName(0)).toBe(undefined);
+    expect(i18n.getWeekdayShortName(1)).toBe('Mo');
+    expect(i18n.getWeekdayShortName(7)).toBe('Su');
+    expect(i18n.getWeekdayShortName(8)).toBe(undefined);
   });
 
 });

src/datepicker/datepicker-i18n.ts

@@ -1,7 +1,11 @@
 import {Injectable} from '@angular/core';
 
-const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const WEEKDAYS_SHORT = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTHS_FULL = [
+  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November',
+  'December'
+];
 
 /**
  * Type of the service supplying month and weekday names to to NgbDatepicker component.
@@ -10,21 +14,29 @@ const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', '
 @Injectable()
 export abstract class NgbDatepickerI18n {
   /**
-   * Returns the short week day name to display in the heading of the month view.
+   * Returns the short weekday name to display in the heading of the month view.
    * With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun
    */
-  abstract getWeekdayName(weekday: number): string;
+  abstract getWeekdayShortName(weekday: number): string;
 
   /**
-   * Returns the month name to display in the date picker navigation.
+   * Returns the short month name to display in the date picker navigation.
    * With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec
    */
-  abstract getMonthName(month: number): string;
+  abstract getMonthShortName(month: number): string;
+
+  /**
+   * Returns the full month name to display in the date picker navigation.
+   * With default calendar we use ISO 8601: 'month' is 1=January ... 12=December
+   */
+  abstract getMonthFullName(month: number): string;
 }
 
 @Injectable()
 export class NgbDatepickerI18nDefault extends NgbDatepickerI18n {
-  getWeekdayName(weekday: number): string { return WEEKDAYS[weekday - 1]; }
+  getWeekdayShortName(weekday: number): string { return WEEKDAYS_SHORT[weekday - 1]; }
+
+  getMonthShortName(month: number): string { return MONTHS_SHORT[month - 1]; }
 
-  getMonthName(month: number): string { return MONTHS[month - 1]; }
+  getMonthFullName(month: number): string { return MONTHS_FULL[month - 1]; }
 }

src/datepicker/datepicker-month-view.ts

@@ -32,7 +32,7 @@ import {DayTemplateContext} from './datepicker-day-template-context';
     <div *ngIf="showWeekdays" class="ngb-dp-week d-flex">
       <div *ngIf="showWeekNumbers" class="ngb-dp-weekday"></div>
       <div *ngFor="let w of month.weekdays" class="ngb-dp-weekday small text-center text-info font-italic">
-        {{ i18n.getWeekdayName(w) }}
+        {{ i18n.getWeekdayShortName(w) }}
       </div>
     </div>
     <div *ngFor="let week of month.weeks" class="ngb-dp-week d-flex">

src/datepicker/datepicker-navigation-select.ts

@@ -19,7 +19,7 @@ import {NgbCalendar} from './ngb-calendar';
   `],
   template: `
     <select [disabled]="disabled" class="custom-select d-inline-block" [value]="date.month" (change)="changeMonth($event.target.value)">
-      <option *ngFor="let m of months" [value]="m">{{ i18n.getMonthName(m) }}</option>
+      <option *ngFor="let m of months" [value]="m">{{ i18n.getMonthShortName(m) }}</option>
     </select>` +
       `<select [disabled]="disabled" class="custom-select d-inline-block" [value]="date.year" (change)="changeYear($event.target.value)">
       <option *ngFor="let y of years" [value]="y">{{ y }}</option>

src/datepicker/datepicker.spec.ts

@@ -284,13 +284,13 @@ describe('ngb-datepicker', () => {
     fixture.detectChanges();
     months = fixture.debugElement.queryAll(By.css('.ngb-dp-month-name'));
     expect(months.length).toBe(1);
-    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['Aug 2016']);
+    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['August 2016']);
 
     fixture.componentInstance.navigation = 'none';
     fixture.detectChanges();
     months = fixture.debugElement.queryAll(By.css('.ngb-dp-month-name'));
     expect(months.length).toBe(1);
-    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['Aug 2016']);
+    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['August 2016']);
   });
 
   it('should always display month names for multiple months', () => {
@@ -299,13 +299,17 @@ describe('ngb-datepicker', () => {
 
     let months = fixture.debugElement.queryAll(By.css('.ngb-dp-month-name'));
     expect(months.length).toBe(3);
-    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['Aug 2016', 'Sep 2016', 'Oct 2016']);
+    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual([
+      'August 2016', 'September 2016', 'October 2016'
+    ]);
 
     fixture.componentInstance.navigation = 'arrows';
     fixture.detectChanges();
     months = fixture.debugElement.queryAll(By.css('.ngb-dp-month-name'));
     expect(months.length).toBe(3);
-    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual(['Aug 2016', 'Sep 2016', 'Oct 2016']);
+    expect(months.map(c => c.nativeElement.innerText.trim())).toEqual([
+      'August 2016', 'September 2016', 'October 2016'
+    ]);
   });
 
   it('should emit navigate event when startDate is defined', () => {

src/datepicker/datepicker.ts

@@ -88,7 +88,7 @@ export interface NgbDatepickerNavigateEvent {
       <template ngFor let-month [ngForOf]="months" let-i="index">
         <div class="ngb-dp-month d-block ml-3">            
           <div *ngIf="navigation !== 'select' || displayMonths > 1" class="ngb-dp-month-name text-center">
-            {{ i18n.getMonthName(month.number) }} {{ month.year }}
+            {{ i18n.getMonthFullName(month.number) }} {{ month.year }}
           </div>
           <ngb-datepicker-month-view
             [month]="month"