如何在 Angular 5 中清除 mat-datepicker答案

【问题标题】：How to clear mat-datepicker in Angular 5如何在 Angular 5 中清除 mat-datepicker
【发布时间】：2018-04-23 14:37:30
【问题描述】：

如何通过单击按钮清除 Angular Material Datepicker？

我试过了。日期。价值。清除。重置 .resetDate

他们似乎都没有清除日期选择器。

HTML：

  <mat-form-field>
    <input matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
    <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled>
    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
  </mat-form-field>

  <button mat-raised-button (click)="resetForm()">Reset</button>

打字稿：

  @ViewChild('fromDatePicker') fromDate: any;
  @ViewChild('toDatePicker') toDate: any;

  resetForm() {
    this.searchString.nativeElement.value = "";
    this.fromDate.value = undefined;

    this.fromDate.date = null;
    this.toDate.date = undefined;

  };

【问题讨论】：

标签： angular angular-material

【解决方案1】：

HTML

  <mat-datepicker (opened)="resetPicker()" class="mat-datepicker" #picker></mat-datepicker>

TS

  @ViewChild(MatDatepicker)
  picker: MatDatepicker<Moment>;

  resetPicker() {
    this.picker.select(undefined);
  }

【讨论】：

这正是我在 Angular 8 中所需要的（没有一个对我有用的高票答案）。
您能告诉我您对Moment 属性使用了什么导入吗？它似乎不在 Angular 中
Nvm，看起来使用 Moment 将依赖于使用 MatMomentDateModule here。

【解决方案2】：

您必须查询matInput 元素。

component.ts

@ViewChild('fromInput', {
  read: MatInput
}) fromInput: MatInput;

@ViewChild('toInput', {
  read: MatInput
}) toInput: MatInput;

resetForm() {
  this.fromInput.value = '';
  this.toInput.value = '';
}

component.html

<mat-form-field>
  <input #fromInput matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input #toInput matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<button mat-raised-button (click)="resetForm()">Reset</button>

Live demo

【讨论】：

【解决方案3】：

另一种方法是设置相关变量undefined：

HTML：

  <mat-form-field>
    <input [(ngModel)]="fromDate" matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
    <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input [(ngModel)]="toDate" matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled>
    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
  </mat-form-field>

  <button mat-raised-button (click)="resetForm()">Reset</button>

打字稿：

  resetForm() {
    this.fromDate = undefined;
    this.toDate = undefined;
  };

【讨论】：

【解决方案4】：

使用 formControl，您也可以通过通用方式进行操作

 genericDateChangedWithKeyboard(value, formControlName) {
if (value.target.value == "") {
  this.formGroup.controls[formControlName].setValue(null);
}

“value”在这里是您传递给输入字段的值

【讨论】：

【解决方案5】：

也可以这样：

component.ts

resetForm(fromInput, toInput) {
  fromInput.value = '';
  toInput.value = '';
}

component.html

<mat-form-field>
  <input #fromInput matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input #toInput matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<button mat-raised-button (click)="resetForm(fromInput, toInput)">Reset</button>

【讨论】：

【解决方案6】：

Worked for me in this way:

HTML

<mat-form-field>
  <input #fromInput matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker-toggle matSuffix (click)="clearDate(fromInput)">
     <mat-icon matDatepickerToggleIcon>clear</mat-icon>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

打字稿

   clearDate(date: HTMLInputElement) {
      date.value = "";
    }

【讨论】：