Angular material Datepicker get value on change

Question

I'm using the new version of angular and angular material. I need to get the value of the datepicker at the moment the user change the date to then pass that value to a function and do something.

datepicker

  <mat-form-field>     <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>     <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>   </mat-form-field> 

and this the function.

  public onChange(event: any, newDate: any): void {     console.log(event.target.value);     // this.getData(newDate);   } 

Answer 1

<mat-form-field>   <input matInput [matDatepicker]="expiration1" placeholder="Expiration" [formControl]="expiration" required (dateChange)="EndDateChange($event)">   <mat-datepicker-toggle matSuffix [for]="expiration1"></mat-datepicker-toggle>   <mat-datepicker #expiration1></mat-datepicker> </mat-form-field> 

Please check this demo link So you will get more idea. Example

Answer 2

According to the official documentation, the MatDatepickerInput has a dateInput EventEmitter and it's emits the selected date.

<mat-form-field>  <input (dateInput)="OnDateChange($event.value)" matInput [matDatepicker]="picker"   [placeholder]="field.label" />  <mat-datepicker-toggle matSuffix [for]="picker"> </mat-datepicker-toggle>  <mat-datepicker #picker></mat-datepicker> </mat-form-field>