角材料日期选择器在更改时获得价值 [英] Angular material Datepicker get value on change

问题描述

我正在使用新版本的angular和angular material.我需要在用户更改日期时获取 datepicker 的值，然后将该值传递给函数并执行某些操作.

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.

日期选择器

  <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);
  }

推荐答案

抱歉我之前没有贴出答案，但我通过@AJT_82 的评论解决了问题.代码如下:

Sorry I didn't post the answer before, but I solved the problem with the @AJT_82's comment. Here is the code:

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

组件 ts

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

基本上，我只是通过了 datepicker 的 $event 来获取值.

Basically, I just passed the $event of the datepicker to get the value.

这篇关于角材料日期选择器在更改时获得价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！