diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 4df9754f2284..98fc04612156 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/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; + 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; @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } + +@Component({ + template: ` + + + `, +}) +class DatepickerWithEvents { + selected: Date | null = null; + openedSpy = jasmine.createSpy('opened spy'); + closedSpy = jasmine.createSpy('closed spy'); + @ViewChild('d') datepicker: MatDatepicker; +} diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index f7b67becb270..5bbd61480e11 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -171,6 +171,12 @@ export class MatDatepicker 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 = new EventEmitter(); + + /** Emits when the datepicker has been closed. */ + @Output('closed') closedStream: EventEmitter = new EventEmitter(); + /** Whether the calendar is open. */ opened = false; @@ -275,6 +281,7 @@ export class MatDatepicker implements OnDestroy { this.touchUi ? this._openAsDialog() : this._openAsPopup(); this.opened = true; + this.openedStream.emit(); } /** Close the calendar. */ @@ -300,6 +307,7 @@ export class MatDatepicker implements OnDestroy { } this.opened = false; + this.closedStream.emit(); } /** Open the calendar as a dialog. */