Question

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

我试过了。日期。值。明确。重启 .resetDate

他们似乎都没有清除Datepicker。

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;

  };

Answer 1

您必须查询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

Answer 2

另一种方法是设置相关变量 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;
  };

Answer 3

也可以通过以下方式完成：

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>

Answer 4

您还可以使用formControl以通用方式完成

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

“值”是您传递给输入字段的值

Answer 5

HTML

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

TS

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

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

Answer 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 = "";
    }

如何在Angular 5中清除mat-datepicker

6 个答案: