fix(datepicker): account for undefined values in ngOnChanges

Fixes #1202 Closes #1229
ng-bootstrap · Jan 19, 2017 · 8803847 · 8803847
1 parent 106fa82
commit 8803847
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/src/datepicker/datepicker-navigation-select.spec.ts b/src/datepicker/datepicker-navigation-select.spec.ts
@@ -72,6 +72,27 @@ describe('ngb-datepicker-navigation-select', () => {
     expect(getOptionValues(getMonthSelect(fixture.nativeElement))).toEqual(['1', '2', '3', '4', '5', '6', '7']);
   });
 
+  it('should update months when current date changes between valid dates and null / undefined', () => {
+    const fixture =
+        createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [minDate]="minDate" [maxDate]="maxDate">`);
+
+    fixture.componentInstance.date = new NgbDate(2016, 1, 1);
+    fixture.componentInstance.minDate = new NgbDate(2015, 7, 1);
+    fixture.componentInstance.maxDate = new NgbDate(2016, 7, 1);
+    fixture.detectChanges();
+    expect(getOptionValues(getMonthSelect(fixture.nativeElement))).toEqual(['1', '2', '3', '4', '5', '6', '7']);
+
+    fixture.componentInstance.date = null;
+    fixture.detectChanges();
+    expect(getOptionValues(getMonthSelect(fixture.nativeElement))).toEqual([
+      '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
+    ]);
+
+    fixture.componentInstance.date = new NgbDate(2016, 5, 1);
+    fixture.detectChanges();
+    expect(getOptionValues(getMonthSelect(fixture.nativeElement))).toEqual(['1', '2', '3', '4', '5', '6', '7']);
+  });
+
   it('should generate year options correctly', () => {
     const fixture =
         createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [minDate]="minDate" [maxDate]="maxDate">`);

diff --git a/src/datepicker/datepicker-navigation-select.ts b/src/datepicker/datepicker-navigation-select.ts
@@ -18,10 +18,10 @@ import {NgbCalendar} from './ngb-calendar';
     }
   `],
   template: `
-    <select [disabled]="disabled" class="custom-select d-inline-block" [value]="date.month" (change)="changeMonth($event.target.value)">
+    <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.getMonthShortName(m) }}</option>
     </select>` +
-      `<select [disabled]="disabled" class="custom-select d-inline-block" [value]="date.year" (change)="changeYear($event.target.value)">
+      `<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>
     </select> 
   `  // template needs to be formatted in a certain way so we don't add empty text nodes
@@ -40,14 +40,10 @@ export class NgbDatepickerNavigationSelect implements OnChanges {
   constructor(public i18n: NgbDatepickerI18n, private calendar: NgbCalendar) { this.months = calendar.getMonths(); }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['maxDate'] || changes['minDate']) {
+    if (changes['maxDate'] || changes['minDate'] || changes['date']) {
       this._generateYears();
       this._generateMonths();
     }
-
-    if (changes['date'] && changes['date'].currentValue.year !== changes['date'].previousValue.year) {
-      this._generateMonths();
-    }
   }
 
   changeMonth(month: string) { this.select.emit(new NgbDate(this.date.year, toInteger(month), 1)); }
@@ -57,12 +53,12 @@ export class NgbDatepickerNavigationSelect implements OnChanges {
   private _generateMonths() {
     this.months = this.calendar.getMonths();
 
-    if (this.date.year === this.minDate.year) {
+    if (this.date && this.date.year === this.minDate.year) {
       const index = this.months.findIndex(month => month === this.minDate.month);
       this.months = this.months.slice(index);
     }
 
-    if (this.date.year === this.maxDate.year) {
+    if (this.date && this.date.year === this.maxDate.year) {
       const index = this.months.findIndex(month => month === this.maxDate.month);
       this.months = this.months.slice(0, index + 1);
     }