Angular Material, Md-datepicker - open date-picker on input click
Just one little problem - if I click on edge of the input, placeholder goes up, but calendar doesn't show up. I need to click more in the middle on the input. However, this solution is nice and clean
Answer to this question is just call open function above your input parent like this
<mat-form-field (click)="picker.open()">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
This one worked for me
<mat-form-field (click)="picker.open()">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></matdatepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
You dont need a directive for that. Just add (click)="picker2.open()"
in the input field:
<md-form-field class="field-half-width">
<input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki"
formControlName="dateUntil" (click)="picker2.open()">
<md-datepicker-toggle id="calendar" mdSuffix [for]="picker2" ></md-datepicker-toggle>
<md-datepicker #picker2></md-datepicker>
</md-form-field>
Here is a link to working demo.
There is no need for providers
<md-input-container>
<input mdInput [mdDatepicker]="start" (click)="start.open()" [(ngModel)]="_start" [ngModelOptions]="{standalone: true}" placeholder="choisir date" (keydown)="false">
<button mdSuffix [mdDatepickerToggle]="start"></button>
</md-input-container>
<md-datepicker #start></md-datepicker>