41

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/components/datepicker/overview.

Current html is like this:

 <input [mdDatepicker]="myDatepicker" id="inputWeekEnding" name="inputWeekEnding" type="text" class="form-control" show-button-bar="false"
      [(ngModel)]="weekEnding" [mdDatepickerFilter]="weekEndingPickerFilter" (ngModelChange)="weekEndingChanged()"
              required>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" [mdDatepickerToggle]="myDatepicker">
    <i class="glyphicon glyphicon-calendar"></i>              
  </button>
</span>
<md-datepicker #myDatepicker md-open-on-focus ></md-datepicker>
Nehal
  • 13,130
  • 4
  • 43
  • 59
mehran
  • 1,314
  • 4
  • 19
  • 33

3 Answers3

77

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)

Pengyy
  • 37,383
  • 15
  • 83
  • 73
  • I prefer using (click) event instead of (focus), because if you close the datepicker without losing the focus, you must blur and focus again to open the calendar again – neurona.dev Mar 29 '22 at 23:14
38

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>
j3ff
  • 5,719
  • 8
  • 38
  • 51
  • 3
    This should be the accepted answer. The other answers are missing the `(closed)="input.blur()"`-option. – John Nov 08 '18 at 20:20
  • 1
    When `touchUi` is activated in `mat-datepicker` after selecting a date it generates an infinite blink. Did it happen to someone else? – Paco Zevallos Jun 09 '19 at 23:46
  • @PacoZevallos I've got the same problem – Dario Vogogna Aug 26 '19 at 14:12
  • I would add a (click)="picker.open()" to make sure the picker is also opened if focus is kept on input because user is clicking on it. – Ben Jun 15 '20 at 21:14
5

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>
David Votrubec
  • 3,968
  • 3
  • 33
  • 44
  • 2
    I tried this but when I close the datepicker, it then takes two clicks elsewhere on the page to 'defocus' the associated guy... O.o – Tom May 17 '18 at 11:20
  • see my answer to remove focus when the calendar is closed – j3ff Oct 29 '18 at 19:13