fix(datepicker): disable back navigation arrow

Fixes #2093 Closes #2110
ng-bootstrap · Jan 26, 2018 · 384b2e8 · 384b2e8
1 parent 70e66c1
commit 384b2e8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/datepicker/datepicker-navigation.spec.ts b/src/datepicker/datepicker-navigation.spec.ts
@@ -30,7 +30,7 @@ describe('ngb-datepicker-navigation', () => {
   });
 
   it('should toggle navigation select component', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="showSelect" [date]="date" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="showSelect" [date]="date"
           [minDate]="minDate" [maxDate]="maxDate"></ngb-datepicker-navigation>`);
 
     expect(fixture.debugElement.query(By.directive(NgbDatepickerNavigationSelect))).not.toBeNull();
@@ -43,7 +43,7 @@ describe('ngb-datepicker-navigation', () => {
   });
 
   it('should send date selection event', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date"
           [minDate]="minDate" [maxDate]="maxDate" (select)="onSelect($event)"></ngb-datepicker-navigation>`);
 
     const monthSelect = getMonthSelect(fixture.nativeElement);
@@ -58,7 +58,7 @@ describe('ngb-datepicker-navigation', () => {
   });
 
   it('should make prev navigation button disabled', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date"
           [minDate]="minDate" [maxDate]="maxDate"></ngb-datepicker-navigation>`);
 
     const links = getNavigationLinks(fixture.nativeElement);
@@ -75,10 +75,15 @@ describe('ngb-datepicker-navigation', () => {
     fixture.componentInstance.date = new NgbDate(2016, 9, 1);
     fixture.detectChanges();
     expect(links[0].hasAttribute('disabled')).toBeFalsy();
+
+    fixture.componentInstance.minDate = new NgbDate(2016, 1, 1);
+    fixture.componentInstance.date = new NgbDate(2016, 1, 1);
+    fixture.detectChanges();
+    expect(links[0].hasAttribute('disabled')).toBeTruthy();
   });
 
   it('should make next navigation button disabled', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [showSelect]="true" [date]="date"
           [minDate]="minDate" [maxDate]="maxDate"></ngb-datepicker-navigation>`);
 
     const links = getNavigationLinks(fixture.nativeElement);
@@ -95,10 +100,15 @@ describe('ngb-datepicker-navigation', () => {
     fixture.componentInstance.date = new NgbDate(2016, 7, 1);
     fixture.detectChanges();
     expect(links[1].hasAttribute('disabled')).toBeFalsy();
+
+    fixture.componentInstance.maxDate = new NgbDate(2016, 12, 31);
+    fixture.componentInstance.date = new NgbDate(2016, 12, 31);
+    fixture.detectChanges();
+    expect(links[1].hasAttribute('disabled')).toBeTruthy();
   });
 
   it('should have disabled navigation buttons and year and month select boxes when disabled', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [disabled]="true" [showSelect]="true" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [disabled]="true" [showSelect]="true"
           [date]="date" [minDate]="minDate" [maxDate]="maxDate"></ngb-datepicker-navigation>`);
 
     const links = getNavigationLinks(fixture.nativeElement);
@@ -109,7 +119,7 @@ describe('ngb-datepicker-navigation', () => {
   });
 
   it('should send navigation events', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [date]="date" [minDate]="minDate" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [date]="date" [minDate]="minDate"
           [maxDate]="maxDate" (navigate)="onNavigate($event)"></ngb-datepicker-navigation>`);
 
     const links = getNavigationLinks(fixture.nativeElement);
@@ -125,7 +135,7 @@ describe('ngb-datepicker-navigation', () => {
   });
 
   it('should have buttons of type button', () => {
-    const fixture = createTestComponent(`<ngb-datepicker-navigation [date]="date" [minDate]="minDate" 
+    const fixture = createTestComponent(`<ngb-datepicker-navigation [date]="date" [minDate]="minDate"
         [maxDate]="maxDate"></ngb-datepicker-navigation>`);
 
     const links = getNavigationLinks(fixture.nativeElement);

diff --git a/src/datepicker/datepicker-navigation.ts b/src/datepicker/datepicker-navigation.ts
@@ -110,7 +110,9 @@ export class NgbDatepickerNavigation {
 
   prevDisabled() {
     const prevDate = this._calendar.getPrev(this.date, 'm');
-    return this.disabled || (this.minDate && prevDate.year <= this.minDate.year && prevDate.month < this.minDate.month);
+    return this.disabled ||
+        (this.minDate && (prevDate.year === this.minDate.year && prevDate.month < this.minDate.month ||
+                          prevDate.year < this.minDate.year && this.minDate.month === 1));
   }
 
   selectDate(date: NgbDate) { this.select.emit(date); }