如何在`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而不将其绑定到datePicker使用for绑定，这使得它除了切换日历的可见性之外什么都不做。

添加click绑定允许执行任意代码，在这种情况下，调用clear组件的 JS/TS 中的函数。

mat-datepicker-toggle可以通过添加mat-icon带有matDatepickerToggleIcon指令的子组件来自定义图标。这会将日历图标替换为任意图标，在本例中为清除图标。来源

默认情况下，图标垂直堆叠。这是通过使用 CSS进行mat-datepicker-toggle显示来inline-block解决的。

控件截图

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

Answer 2

默认情况下，没有mat-datepicker向输入添加清晰图标的选项。但是我们可以通过使用css按钮的mat-icon和 来在日期选择器中获得它input。我们需要将HTML 中的放在mat-icon后面。input

我还建议不要在同一元素上使用ngModel和。formControlName使用其中之一。当您有同名的模板变量时，您也可以使用data1as your 。ngModel只需将 更改ngModel为另一个唯一变量即可。

现在，我们的 中已经有了清晰的图标mat-datepicker，但是还有另一个问题，当您单击清晰的图标时，日期选择器输入就会成为焦点。为了防止click事件在 DOM 树中冒泡，我们需要使用event.stopPropagation()

更改您的 HTML，如下所示

<mat-form-field>
    <input class="mat-datepicker-input" matInput [(ngModel)]="date" [matDatepicker]="data1" id="data1" name="data1">
    <mat-icon matDatepickerToggleIcon (click)="clearDate($event)">clear</mat-icon>
    <mat-datepicker-toggle matSuffix [for]="data1"></mat-datepicker-toggle>
    <mat-datepicker #data1></mat-datepicker>
</mat-form-field>

在你的CSS中

.mat-datepicker-input {
    width: 85%;
}

mat-icon {
    position: relative;
    float: right;
    top: -3px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.54);
}

在你的组件中

clearDate(event) {
    event.stopPropagation();
    this.date = null;
}

这是StackBlitz上的一个工作示例。