fix(datepicker): popup disabled state

ng-bootstrap · Oct 18, 2017 · a05727e · a05727e
1 parent 6c7a31b
commit a05727e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 7 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -160,6 +160,11 @@ describe('NgbInputDatepicker', () => {
          expect(input.disabled).toBeTruthy();
          expect(buttonInDatePicker.disabled).toBeTruthy();
 
+         const dayElements = fixture.nativeElement.querySelectorAll('ngb-datepicker-month-view .ngb-dp-day');
+         expect(dayElements[1]).toHaveCssClass('disabled');
+         expect(dayElements[11]).toHaveCssClass('disabled');
+         expect(dayElements[21]).toHaveCssClass('disabled');
+
          fixture.componentInstance.isDisabled = false;
          fixture.detectChanges();
          tick();
@@ -168,8 +173,51 @@ describe('NgbInputDatepicker', () => {
          expect(fixture.nativeElement.querySelector('ngb-datepicker')).not.toBeNull();
          expect(input.disabled).toBeFalsy();
          expect(buttonInDatePicker.disabled).toBeFalsy();
+
+         const dayElements2 = fixture.nativeElement.querySelectorAll('ngb-datepicker-month-view .ngb-dp-day');
+         expect(dayElements2[1]).not.toHaveCssClass('disabled');
+         expect(dayElements2[11]).not.toHaveCssClass('disabled');
+         expect(dayElements2[21]).not.toHaveCssClass('disabled');
        }));
 
+    it('should propagate disabled state without form control', () => {
+      const fixture = createTestCmpt(`
+        <input ngbDatepicker #d="ngbDatepicker" [disabled]="isDisabled">
+        <button (click)="open(d)">Open</button>`);
+      fixture.componentInstance.isDisabled = true;
+      fixture.detectChanges();
+
+      const button = fixture.nativeElement.querySelector('button');
+      const input = fixture.nativeElement.querySelector('input');
+
+      expect(input.disabled).toBeTruthy();
+
+      button.click();  // open
+      fixture.detectChanges();
+      const buttonInDatePicker = fixture.nativeElement.querySelector('ngb-datepicker button');
+
+      expect(fixture.nativeElement.querySelector('ngb-datepicker')).not.toBeNull();
+      expect(input.disabled).toBeTruthy();
+      expect(buttonInDatePicker.disabled).toBeTruthy();
+
+      const dayElements = fixture.nativeElement.querySelectorAll('ngb-datepicker-month-view .ngb-dp-day');
+      expect(dayElements[1]).toHaveCssClass('disabled');
+      expect(dayElements[11]).toHaveCssClass('disabled');
+      expect(dayElements[21]).toHaveCssClass('disabled');
+
+      fixture.componentInstance.isDisabled = false;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('ngb-datepicker')).not.toBeNull();
+      expect(input.disabled).toBeFalsy();
+      expect(buttonInDatePicker.disabled).toBeFalsy();
+
+      const dayElements2 = fixture.nativeElement.querySelectorAll('ngb-datepicker-month-view .ngb-dp-day');
+      expect(dayElements2[1]).not.toHaveCssClass('disabled');
+      expect(dayElements2[11]).not.toHaveCssClass('disabled');
+      expect(dayElements2[21]).not.toHaveCssClass('disabled');
+    });
+
     it('should propagate touched state on (blur)', fakeAsync(() => {
          const fixture = createTestCmpt(`<input ngbDatepicker [(ngModel)]="date">`);
          const inputDebugEl = fixture.debugElement.query(By.css('input'));
@@ -202,6 +250,7 @@ describe('NgbInputDatepicker', () => {
        }));
   });
 
+
   describe('manual data entry', () => {
 
     it('should reformat value entered by a user when it is valid', fakeAsync(() => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -50,7 +50,8 @@ const NGB_DATEPICKER_VALIDATOR = {
     '(input)': 'manualDateChange($event.target.value)',
     '(change)': 'manualDateChange($event.target.value, true)',
     '(keyup.esc)': 'close()',
-    '(blur)': 'onBlur()'
+    '(blur)': 'onBlur()',
+    '[disabled]': 'disabled'
   },
   providers: [NGB_DATEPICKER_VALUE_ACCESSOR, NGB_DATEPICKER_VALIDATOR, NgbDatepickerService]
 })
@@ -141,6 +142,19 @@ export class NgbInputDatepicker implements OnChanges,
    */
   @Output() navigate = new EventEmitter<NgbDatepickerNavigateEvent>();
 
+  @Input()
+  get disabled() {
+    return !!this._disabled;
+  }
+  set disabled(value: any) {
+    let isDisabled = value != null && `${value}` !== 'false';
+    this._disabled = isDisabled;
+    if (this.isOpen()) {
+      this._setDatepickerDisabledState(isDisabled);
+    }
+  }
+
+  private _disabled: boolean;
   private _onChange = (_: any) => {};
   private _onTouched = () => {};
   private _validatorChange = () => {};
@@ -164,12 +178,7 @@ export class NgbInputDatepicker implements OnChanges,
 
   registerOnValidatorChange(fn: () => void): void { this._validatorChange = fn; };
 
-  setDisabledState(isDisabled: boolean): void {
-    this._renderer.setProperty(this._elRef.nativeElement, 'disabled', isDisabled);
-    if (this.isOpen()) {
-      this._cRef.instance.setDisabledState(isDisabled);
-    }
-  }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
 
   validate(c: AbstractControl): {[key: string]: any} {
     const value = c.value;
@@ -231,6 +240,8 @@ export class NgbInputDatepicker implements OnChanges,
       // focus handling
       this._cRef.instance.focus();
 
+      this._setDatepickerDisabledState(this.disabled);
+
       if (this.container === 'body') {
         window.document.querySelector(this.container).appendChild(this._cRef.location.nativeElement);
       }
@@ -310,4 +321,6 @@ export class NgbInputDatepicker implements OnChanges,
       this._onTouched();
     }
   }
+
+  private _setDatepickerDisabledState(isDisabled: boolean) { this._cRef.instance.setDisabledState(isDisabled); }
 }