angular material 2 date picker auto open on focus

Question

How angular material 2 date picker can be configured to be opened automatically on focus? I didn\'t find anything in the documentation at https://material.angular.io/compone

Answer 1

mdDatepicker provides method open() in order to open it manually doe developers. You can invoke it at md-input's focus event. See docs(Method of MatDatepicker).

<md-input-container>
  <input mdInput [mdDatepicker]="picker" (focus)="picker.open()" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Demo(included demo for opening on focus and opening in typescript)

Answer 2

For the new Angular & Material (5 and above) it should something like this. The link in question points to up-to-date documentation, but uses code from Angular 2, which might be confusing to newbies.

<mat-form-field>
      <input matInput [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 3

As per @angular/material2 v7.0.1 I've been able to handle the input focus correctly by...

• adding (focus)="picker.open()" on matInput input element to trigger the datepicker opening on focus
• adding (closed)="input.blur()" on mat-datepicker element so it could remove the focus on the input once the date-picker is closed

<mat-form-field>
  <input matInput #input [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (closed)="input.blur()"></mat-datepicker>
</mat-form-field>