要删除 mat datepicker 文本框中的默认值,可以使用以下方法:
示例代码如下:
<mat-form-field>
<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
import { Component, ViewChild } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent {
@ViewChild(MatDatepicker) datepicker: MatDatepicker<any>;
selectedDate: Date;
clearDate() {
this.selectedDate = null;
this.datepicker._datepickerInput.value = ''; // 清空文本框中的值
this.datepicker.close(); // 关闭日期选择器
}
}
在这个例子中,我们使用了 Angular 的双向数据绑定将选中的日期绑定到 selectedDate 变量上。clearDate 方法会将 selectedDate 设置为 null,然后清空文本框中的值,并关闭日期选择器。
推荐的腾讯云相关产品:腾讯云云服务器(ECS)、腾讯云云函数(SCF)、腾讯云对象存储(COS)、腾讯云数据库(TencentDB)等。你可以在腾讯云官网上找到这些产品的详细介绍和文档链接。
注意:本回答中未提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云