Angular Material Datepicker切换图标单击事件

时间:2020-02-11 13:38:56

标签: javascript angular datepicker angular-material

是否可以通过某种方式在有角材质的日期选择器切换图标上捕获单击事件?我想要触发函数foo()。

我的实现如下:

          <mat-form-field class="example-full-width">
            <input matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>

我已经尝试过将(click)=“ foo()”放入mat-datepicker-toggle和mat-datepicker元素,但未触发事件。

2 个答案:

答案 0 :(得分:3)

使用角度日期选择器组件提供的打开和关闭事件发射器来监听calander组件的打开和关闭。

<mat-form-field class="example-full-width">
            <input  matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle            
             matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker 
            #ref
            (opened)="toggle(ref)"
            (closed)="toggle(ref)"
            #picker></mat-datepicker>
</mat-form-field>

Example

答案 1 :(得分:0)

尝试(focus)=“ foo()”而不是(click)=“ foo()”