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

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

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

默认情况下，图标垂直堆叠。 这是通过使用 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没有为输入添加清除图标的选项。 但是我们可以通过使用mat-icon按钮和input的css在我们的日期选择器中获得它。 我们需要将mat-icon放在 HTML 的input之后。

我还建议不要在同一元素上使用ngModel和formControlName 。 使用其中之一。 当您有一个同名的模板变量时，您也将data1用作您的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上的一个工作示例。