Set value angular material datepicker, from input outside

Jiraiyaa picture Jiraiyaa · May 1, 2019 · Viewed 9.8k times · Source

I want to set value of angular material datepicker, but from input outside material datepicker input

Please see this for more information: angular-material-datepicker

<mat-form-field>
    <input matInput placeholder="set date picker on blur 
    (blur)="setDatepicker()">
</mat-form-field> <br>
<mat-form-field class="example-full-width">
    <input matInput  [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer

Hien Nguyen picture Hien Nguyen · May 1, 2019

You need update

HTML

(blur)="setDatepicker($event.target.value)">

<input matInput [(ngModel)]="input" [matDatepicker]="picker" placeholder="Choose a date">

TS

export class DatepickerFilterExample {
  input: any;
  setDatepicker(val) {
    //alert(val)
    this.input = new Date(val);
  }
}

Forked https://stackblitz.com/edit/angular-material-datepicker-example-2