Angular material Datepicker get value on change
<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
Sorry I didn't post the answer before, but I solved the problem with the @AJT_82's comment. Here is the code:
Component HTML
<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)="onDate($event)"></mat-datepicker> </mat-form-field>
compoment ts
public onDate(event): void { this.roomsFilter.date = event; this.getData(this.roomsFilter.date); }
Basically, I just passed the $event
of the datepicker
to get the value.
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>