角度材料Datepicker在变化时获得价值

Question

我正在使用角度和角度材料的新版本.我需要获取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);
  }

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>

请查看此演示链接,以便您了解更多信息. 例

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>

Answer 3

抱歉，我之前没有发布答案，但是我用@ 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>

成分

  public onDate(event): void {
    this.roomsFilter.date = event;
    this.getData(this.roomsFilter.date);
  }

基本上我刚刚过去的$event的datepicker得到的值。