angular - 如何在 `mat-datepicker` 中添加清除按钮

Question

如何在 mat-datepicker 中添加清除按钮.正是在打开日历中如何添加日期清理按钮。

<input matInput [(ngModel)]="data1" [matDatepicker]="data1" [value]="" formControlName="data1" id="data1" name="data1">
<mat-datepicker-toggle matSuffix [for]="data1"></mat-datepicker-toggle>
<mat-datepicker #data1></mat-datepicker>

我把属性里面:

<input matInput [(ngModel)]="data1" [matDatepicker]="data1" [value]="" formControlName="data1" id="data1" name="data1">
<mat-datepicker-toggle matSuffix [for]="data1"></mat-datepicker-toggle>
<mat-datepicker #data1>
    <button (click)="onClickMe()">
        <mat-icon matDatepickerToggleIcon>clear</mat-icon>
    </button>
</mat-datepicker>

但它不起作用。

我会寻求帮助。谢谢你。

Answer 1

此解决方案使用 mat-datepicker-toggle 的现有功能无需将其绑定(bind)到 datePicker使用 for绑定(bind)，这使它什么都不做，而不是切换日历的可见性。

添加 click绑定(bind)允许执行任意代码，在这种情况下，调用 clear组件的 JS/TS 中的函数。
mat-datepicker-toggle 上的图标可以通过添加 child 来定制mat-icon带有 matDatepickerToggleIcon 的组件指示。这会将日历图标替换为任意图标，在本例中为清除图标。 source

默认情况下，图标是垂直堆叠的。这是通过制作 mat-datepicker-toggle 来解决的。显示为 inline-block与 CSS。

Screenshot of the control

HTML

<mat-form-field appearance="fill">
    <mat-label>Start date</mat-label>
    <input matInput [matDatepicker]="startDatePicker" [(ngModel)]="startDate">
    <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
    <mat-datepicker-toggle matSuffix (click)="clearStartDate()">
        <mat-icon matDatepickerToggleIcon>clear</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #startDatePicker></mat-datepicker>
</mat-form-field>

组件.ts

startDate: Date;

clearStartDate() {
    this.startDate = null;
}

CSS

mat-datepicker-toggle {
    display: inline-block;
}