Set value angular material datepicker, from input outside

Question

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>

Hien Nguyen · Accepted Answer · 2019-05-01 05:44:45Z

4

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

answered May 1, 2019 at 5:44

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arun kumar · Accepted Answer · 2019-05-01 05:57:52Z

By using formGroup and HTML datepicker

import { FormGroup,FormControl} from '@angular/forms';
date;
  testForm : FormGroup;

  constructor(){
     this.testForm = new FormGroup({
          date:new FormControl(this.date),
          setDate:new FormControl(),
        })
  }
  setDatepicker(evt) {
    var value= this.testForm.controls['setDate'].value
    this.date=new Date(new Date(value).getTime())
    this.testForm.controls['date'].setValue(this.date);
  }

 <form  [formGroup]="testForm" >
<mat-form-field>
  <input matInput type="date" placeholder=" date picker on blur" (blur)="setDatepicker($event)" formControlName="setDate">
</mat-form-field> <br>
<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [matDatepicker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="date" #picker></mat-datepicker>
</mat-form-field>
</form>

Collectives™ on Stack Overflow

Set value angular material datepicker, from input outside

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related