feat(datepicker): dispatch events when datepicker is opened and closed (#7792)

Adds `opened` and `closed` events, dispatched when a datepicker is opened/closed.

Author: crisbeto

src/lib/datepicker/datepicker.spec.ts

@@ -60,6 +60,7 @@ describe('MatDatepicker', () => {
           MultiInputDatepicker,
           NoInputDatepicker,
           StandardDatepicker,
+          DatepickerWithEvents,
         ],
       });
 
@@ -906,6 +907,36 @@ describe('MatDatepicker', () => {
         });
       }));
     });
+
+    describe('with events', () => {
+      let fixture: ComponentFixture<DatepickerWithEvents>;
+      let testComponent: DatepickerWithEvents;
+
+      beforeEach(async(() => {
+        fixture = TestBed.createComponent(DatepickerWithEvents);
+        fixture.detectChanges();
+        testComponent = fixture.componentInstance;
+      }));
+
+      it('should dispatch an event when a datepicker is opened', () => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        expect(testComponent.openedSpy).toHaveBeenCalled();
+      });
+
+      it('should dispatch an event when a datepicker is closed', () => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        testComponent.datepicker.close();
+        fixture.detectChanges();
+
+        expect(testComponent.closedSpy).toHaveBeenCalled();
+      });
+
+    });
+
   });
 
   describe('with missing DateAdapter and MAT_DATE_FORMATS', () => {
@@ -1240,3 +1271,16 @@ class DatepickerWithISOStrings {
   @ViewChild('d') datepicker: MatDatepicker<Date>;
   @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<Date>;
 }
+
+@Component({
+  template: `
+    <input [(ngModel)]="selected" [matDatepicker]="d">
+    <mat-datepicker (opened)="openedSpy()" (closed)="closedSpy()" #d></mat-datepicker>
+  `,
+})
+class DatepickerWithEvents {
+  selected: Date | null = null;
+  openedSpy = jasmine.createSpy('opened spy');
+  closedSpy = jasmine.createSpy('closed spy');
+  @ViewChild('d') datepicker: MatDatepicker<Date>;
+}

src/lib/datepicker/datepicker.ts

@@ -172,6 +172,12 @@ export class MatDatepicker<D> implements OnDestroy {
   /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */
   @Input() panelClass: string | string[];
 
+  /** Emits when the datepicker has been opened. */
+  @Output('opened') openedStream: EventEmitter<void> = new EventEmitter<void>();
+
+  /** Emits when the datepicker has been closed. */
+  @Output('closed') closedStream: EventEmitter<void> = new EventEmitter<void>();
+
   /** Whether the calendar is open. */
   opened = false;
 
@@ -276,6 +282,7 @@ export class MatDatepicker<D> implements OnDestroy {
 
     this.touchUi ? this._openAsDialog() : this._openAsPopup();
     this.opened = true;
+    this.openedStream.emit();
   }
 
   /** Close the calendar. */
@@ -301,6 +308,7 @@ export class MatDatepicker<D> implements OnDestroy {
     }
 
     this.opened = false;
+    this.closedStream.emit();
   }
 
   /** Open the calendar as a dialog. */