angular material 2 date picker auto open on focus

angular angular-material2
mehran picture mehran · Aug 25, 2017 · Viewed 20.7k times · Source

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:

Answer

Pengyy picture Pengyy · Aug 25, 2017

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)

Related questions

mat-form-field must contain a MatFormFieldControl

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this: field: <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}&…

Read More
Angular Material: mat-select not selecting default

I have a mat-select where the options are all objects defined in an array. I am trying to set the value to default to one of the options, however it is being left selected when the page renders. My typescript …

Read More
Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"&…

Read More