feat(datepicker): allow setting custom popup class (#4039)

Fixes #2984
ng-bootstrap · Mar 18, 2021 · 4741ffb · 4741ffb
1 parent 81f2c59
commit 4741ffb
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -861,6 +861,31 @@ describe('NgbInputDatepicker', () => {
       expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledWith(new NgbDate(2018, 3, 1));
       expect(fixture.componentInstance.onModelChange).toHaveBeenCalledWith({year: 2018, month: 3, day: 1});
     });
+
+    it('should add custom popup class via "popupClass" input', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker #d="ngbDatepicker" [datepickerClass]="popupClass">`);
+      fixture.detectChanges();
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      dpInput.open();
+
+      // initial value
+      let element = document.querySelector('ngb-datepicker') as HTMLElement;
+      expect(element).not.toBeNull();
+      expect(element).toHaveCssClass('my-datepicker-popup');
+      expect(element).not.toHaveCssClass('my-another-datepicker-popup');
+
+      // empty value
+      fixture.componentInstance.popupClass = '';
+      fixture.detectChanges();
+      expect(element).not.toHaveCssClass('my-datepicker-popup');
+      expect(element).not.toHaveCssClass('my-another-datepicker-popup');
+
+      // another value
+      fixture.componentInstance.popupClass = 'my-another-datepicker-popup';
+      fixture.detectChanges();
+      expect(element).not.toHaveCssClass('my-datepicker-popup');
+      expect(element).toHaveCssClass('my-another-datepicker-popup');
+    });
   });
 
   describe('container', () => {
@@ -1187,6 +1212,7 @@ class TestComponent {
   minDate: NgbDateStruct;
   maxDate: NgbDateStruct;
   isDisabled;
+  popupClass = 'my-datepicker-popup';
 
   onNavigate(params) {}
 

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -91,6 +91,13 @@ export class NgbInputDatepicker implements OnChanges,
    */
   @Input() autoClose: boolean | 'inside' | 'outside';
 
+  /**
+   * An optional class applied to the datepicker popup element.
+   *
+   * @since 9.1.0
+   */
+  @Input() datepickerClass: string;
+
   /**
    * The reference to a custom template for the day.
    *
@@ -465,6 +472,11 @@ export class NgbInputDatepicker implements OnChanges,
         this._cRef !.instance.ngOnChanges(changes);
       }
     }
+
+    if (changes['datepickerClass']) {
+      const {currentValue, previousValue} = changes['datepickerClass'];
+      this._applyPopupClass(currentValue, previousValue);
+    }
   }
 
   ngOnDestroy() {
@@ -483,13 +495,27 @@ export class NgbInputDatepicker implements OnChanges,
     datepickerInstance.startDate = this.startDate || this._model;
   }
 
+  private _applyPopupClass(newClass: string, oldClass?: string) {
+    const popupEl = this._cRef ?.location.nativeElement;
+    if (popupEl) {
+      if (newClass) {
+        this._renderer.addClass(popupEl, newClass);
+      }
+      if (oldClass) {
+        this._renderer.removeClass(popupEl, oldClass);
+      }
+    }
+  }
+
   private _applyPopupStyling(nativeElement: any) {
     this._renderer.addClass(nativeElement, 'dropdown-menu');
     this._renderer.addClass(nativeElement, 'show');
 
     if (this.container === 'body') {
       this._renderer.addClass(nativeElement, 'ngb-dp-body');
     }
+
+    this._applyPopupClass(this.datepickerClass);
   }
 
   private _subscribeForDatepickerOutputs(datepickerInstance: NgbDatepicker) {