feat(datepicker): add opened input binding

* Adds support for the `opened` input binding.

Closes #8094

Author: devversion

src/lib/datepicker/datepicker.spec.ts

@@ -113,6 +113,20 @@ describe('MatDatepicker', () => {
             .not.toBeNull();
       });
 
+      it('should open datepicker if opened input is set to true', async(() => {
+        testComponent.opened = true;
+        fixture.detectChanges();
+
+        expect(document.querySelector('.mat-datepicker-content')).not.toBeNull();
+
+        testComponent.opened = false;
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          expect(document.querySelector('.mat-datepicker-content')).toBeNull();
+        });
+      }));
+
       it('open in disabled mode should not open the calendar', () => {
         testComponent.disabled = true;
         fixture.detectChanges();
@@ -1096,10 +1110,11 @@ describe('MatDatepicker', () => {
 @Component({
   template: `
     <input [matDatepicker]="d" [value]="date">
-    <mat-datepicker #d [touchUi]="touch" [disabled]="disabled"></mat-datepicker>
+    <mat-datepicker #d [touchUi]="touch" [disabled]="disabled" [opened]="opened"></mat-datepicker>
   `,
 })
 class StandardDatepicker {
+  opened = false;
   touch = false;
   disabled = false;
   date: Date | null = new Date(2020, JAN, 1);

src/lib/datepicker/datepicker.ts

@@ -186,7 +186,18 @@ export class MatDatepicker<D> implements OnDestroy {
   @Output('closed') closedStream: EventEmitter<void> = new EventEmitter<void>();
 
   /** Whether the calendar is open. */
-  opened = false;
+  @Input()
+  get opened(): boolean { return this._opened; }
+  set opened(value: boolean) {
+    const shouldOpen = coerceBooleanProperty(value);
+
+    if (shouldOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+  private _opened = false;
 
   /** The id for the datepicker calendar. */
   id = `mat-datepicker-${datepickerUid++}`;
@@ -277,7 +288,7 @@ export class MatDatepicker<D> implements OnDestroy {
 
   /** Open the calendar. */
   open(): void {
-    if (this.opened || this.disabled) {
+    if (this._opened || this.disabled) {
       return;
     }
     if (!this._datepickerInput) {
@@ -288,13 +299,13 @@ export class MatDatepicker<D> implements OnDestroy {
     }
 
     this.touchUi ? this._openAsDialog() : this._openAsPopup();
-    this.opened = true;
+    this._opened = true;
     this.openedStream.emit();
   }
 
   /** Close the calendar. */
   close(): void {
-    if (!this.opened) {
+    if (!this._opened) {
       return;
     }
     if (this._popupRef && this._popupRef.hasAttached()) {
@@ -314,7 +325,7 @@ export class MatDatepicker<D> implements OnDestroy {
       this._focusedElementBeforeOpen = null;
     }
 
-    this.opened = false;
+    this._opened = false;
     this.closedStream.emit();
   }