diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index c9d0ff8768ee..dfcf2df0a509 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -82,24 +82,25 @@ describe('MatDatepicker', () => { })); it('open non-touch should open popup', () => { - expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); + expect(document.querySelector('.cdk-overlay-pane.mat-datepicker-popup')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('.cdk-overlay-pane')).not.toBeNull(); + expect(document.querySelector('.cdk-overlay-pane.mat-datepicker-popup')).not.toBeNull(); }); it('open touch should open dialog', () => { testComponent.touch = true; fixture.detectChanges(); - expect(document.querySelector('mat-dialog-container')).toBeNull(); + expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('mat-dialog-container')).not.toBeNull(); + expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container')) + .not.toBeNull(); }); it('open in disabled mode should not open the calendar', () => { diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index cbd4c0da8cf7..3b5f783fbb86 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -302,6 +302,7 @@ export class MatDatepicker implements OnDestroy { this._dialogRef = this._dialog.open(MatDatepickerContent, { direction: this._dir ? this._dir.value : 'ltr', viewContainerRef: this._viewContainerRef, + panelClass: 'mat-datepicker-dialog', }); this._dialogRef.afterClosed().subscribe(() => this.close()); this._dialogRef.componentInstance.datepicker = this; @@ -338,7 +339,8 @@ export class MatDatepicker implements OnDestroy { hasBackdrop: true, backdropClass: 'mat-overlay-transparent-backdrop', direction: this._dir ? this._dir.value : 'ltr', - scrollStrategy: this._scrollStrategy() + scrollStrategy: this._scrollStrategy(), + panelClass: 'mat-datepicker-popup', }); this._popupRef = this._overlay.create(overlayConfig);