时间戳

首页 > 解决方案 > Angular Material：检查用户是否在没有进行任何选择的情况下单击了 Datepicker 外部

angular - Angular Material：检查用户是否在没有进行任何选择的情况下单击了 Datepicker 外部

问题描述

如果用户在 Material Angular 日期选择器外部单击，输出事件是什么？

  1. 想知道用户点击 Datepicker 的具体时间，
  2. 然后 没有进行任何新的选择，或者没有重新选择已经输入的日期
  3. 并点击？（因此关闭它）。

Closed Stream 事件不是确切的答案，因为用户可以点击日期选择。

https://material.angular.io/components/datepicker/api

标签： angulardatepickerangular-materialangular8

解决方案

您可以存储在变量中

waitClose:boolean

然后，您可以使用事件 (dateChange) 将变量设置为 false 和 (opened) 将变量设置为 true。

(close)="waitClose && close()" 使函数 close() 仅在您单击外部时发生

<mat-form-field>
  <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" 
                            (dateChange)="waitClose=false" >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (closed)="waitClose && close()"
                            (opened)="waitClose=true">
  </mat-datepicker>
</mat-form-field>

见stackblitz

推荐阅读