feat(dialog): add datepicker dialog and popup classes for easy styling (#7013)

Author: mmalerba

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', () => {

src/lib/datepicker/datepicker.ts

@@ -302,6 +302,7 @@ export class MatDatepicker<D> 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<D> 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);