Угловой материал Datepicker получает значение при изменении

Я использую новую версию углового и угловатого материала. Мне нужно получить значение datepicker в момент изменения пользователем даты, чтобы передать это значение функции и сделать что-то.

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>

и это функция.

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

Ответ 1

Извините, я не публиковал ответ раньше, но я решил проблему с комментарием @AJT_82. вот код.

Компонент 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);
  }

В основном, я просто прошел $event datepicker чтобы получить значение.

Ответ 2

<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>

Пожалуйста, проверьте эту демонстрационную ссылку, чтобы вы получили больше идей. ПримерExample

Ответ 3

Согласно официальной документации, MatDatepickerInput имеет dateInput EventEmitter и выдает выбранную дату.

<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>