fix(datepicker): update minDate and maxDate dynamically (#3507)

Propagate minDate and maxDate changes dynamically from the input datepicker to the datepicker Fixes: #3506
ng-bootstrap · Jan 27, 2020 · 4f61496 · 4f61496
1 parent 1bd5975
commit 4f61496
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -639,6 +639,62 @@ describe('NgbInputDatepicker', () => {
       expect(dp.maxDate).toEqual({year: 2016, month: 9, day: 13});
     });
 
+    it('should dynamically propagate the "minDate" option', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker [minDate]="minDate">`);
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      fixture.componentRef.instance.minDate = {year: 2018, month: 12, day: 31};
+
+      dpInput.open();
+      fixture.detectChanges();
+
+      const dp = fixture.debugElement.query(By.css('ngb-datepicker')).injector.get(NgbDatepicker);
+      expect(dp.minDate).toEqual({year: 2018, month: 12, day: 31});
+
+      fixture.componentRef.instance.minDate = {year: 2019, month: 11, day: 14};
+      fixture.detectChanges();
+      expect(dp.minDate).toEqual({year: 2019, month: 11, day: 14});
+
+    });
+
+    it('should dynamically propagate the "maxDate" option', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker [maxDate]="maxDate">`);
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      fixture.componentRef.instance.maxDate = {year: 2019, month: 12, day: 31};
+
+      dpInput.open();
+      fixture.detectChanges();
+
+      const dp = fixture.debugElement.query(By.css('ngb-datepicker')).injector.get(NgbDatepicker);
+      expect(dp.maxDate).toEqual({year: 2019, month: 12, day: 31});
+
+      fixture.componentRef.instance.maxDate = {year: 2019, month: 12, day: 14};
+      fixture.detectChanges();
+      expect(dp.maxDate).toEqual({year: 2019, month: 12, day: 14});
+
+    });
+
+    it('should dynamically propagate the "maxDate" and "minDate" option', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker [minDate]="minDate" [maxDate]="maxDate">`);
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      fixture.componentRef.instance.minDate = {year: 2019, month: 11, day: 14};
+      fixture.componentRef.instance.maxDate = {year: 2019, month: 12, day: 31};
+
+      dpInput.open();
+      fixture.detectChanges();
+
+      const dp = fixture.debugElement.query(By.css('ngb-datepicker')).injector.get(NgbDatepicker);
+      expect(dp.minDate).toEqual({year: 2019, month: 11, day: 14});
+      expect(dp.maxDate).toEqual({year: 2019, month: 12, day: 31});
+
+      fixture.componentRef.instance.minDate = {year: 2019, month: 10, day: 14};
+      fixture.componentRef.instance.maxDate = {year: 2019, month: 12, day: 14};
+      fixture.detectChanges();
+
+      expect(dp.minDate).toEqual({year: 2019, month: 10, day: 14});
+      expect(dp.maxDate).toEqual({year: 2019, month: 12, day: 14});
+
+    });
+
     it('should propagate the "outsideDays" option', () => {
       const fixture = createTestCmpt(`<input ngbDatepicker outsideDays="collapsed">`);
       const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
@@ -1079,6 +1135,8 @@ class TestNativeComponent {
 class TestComponent {
   container;
   date: NgbDateStruct;
+  minDate: NgbDateStruct;
+  maxDate: NgbDateStruct;
   isDisabled;
 
   onNavigate() {}

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -432,6 +432,16 @@ export class NgbInputDatepicker implements OnChanges,
   ngOnChanges(changes: SimpleChanges) {
     if (changes['minDate'] || changes['maxDate']) {
       this._validatorChange();
+
+      if (this.isOpen()) {
+        if (changes['minDate']) {
+          this._cRef.instance.minDate = this._dateAdapter.toModel(changes.minDate.currentValue);
+        }
+        if (changes['maxDate']) {
+          this._cRef.instance.maxDate = this._dateAdapter.toModel(changes.maxDate.currentValue);
+        }
+        this._cRef.instance.ngOnChanges(changes);
+      }
     }
   }