Angular 材料 Datepicker 获得改变的价值

Posted 2023-05-07

【中文标题】Angular 材料 Datepicker 获得改变的价值

【英文标题】：Angular material Datepicker get value on change

【发布时间】：2018-04-08 07:24:10

【问题描述】：

我正在使用新版本的棱角和棱角材料。我需要在用户更改日期时获取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);
  

【问题讨论】：

这似乎对我有用，check here

我修好了。日期选择器由于某种原因错过了该事件，但仍然不知道为什么。

我假设你只想要这个值，所以你可以使用 console.log(event) ？ plnkr.co/edit/8c21pXDrx7OCq93Gppa0?p=preview

您不是已经在输入字段的 ngModel 绑定中获得了值吗？我认为#picker 本身不需要 ngModel。 （顺便说一句 - 我知道这是一篇旧帖子，但只是想在茉莉花测试中测试我的 datePicker 并遇到了这个问题。）

【参考方案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>

请查看此演示链接，以便您了解更多。 Example

【参考方案2】：

根据官方文档，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>

【讨论】：

输入标签没有关闭？

【参考方案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>

评论 ts

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

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

【讨论】：

selectedChanged 似乎在 mat-datepicker 的更高版本中被删除