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绑定允许执行任意代码，在这种情况下，可以在组件的JS / TS中调用clear函数。

可以通过添加带有mat-datepicker-toggle伪指令的子mat-icon组件来自定义matDatepickerToggleIcon上的图标。这会将日历图标替换为任意图标，在这种情况下为清除图标。 source

默认情况下，图标垂直堆叠。通过使用CSS将mat-datepicker-toggle显示为inline-block可以解决此问题。

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>

Component.ts

startDate: Date;

clearStartDate() {
    this.startDate = null;
}

CSS

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

Answer 2

mat-datepicker没有默认情况下向输入添加透明图标的选项。但是，我们可以通过使用css按钮的mat-icon和input在日期选择器中获得此功能。我们需要将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>

在您的CSSs

.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上的一个有效示例。

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

2 个答案: