web-dev-qa-db-fra.com

Comment effacer mat-datepicker dans Angular 5

Comment effacer un Datepicker de matériau angulaire avec un clic de bouton?

J'ai essayé . date . valeur . effacer . réinitialiser . resetDate

Aucun d'entre eux ne semble effacer le 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>

Manuscrit:

  @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;

  };
angularangular-material
6
JDS

Vous devez interroger l'élément matInput.

composant.ts

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

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

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

composant.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>

Démo en direct

5
Tomasz Kula

Une autre façon de procéder consiste à définir la variable associée 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>

Manuscrit:

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

Cela peut aussi être fait de cette façon:

composant.ts 

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

composant.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>
0
Harry Haller

Avec un formControl, vous pouvez également le faire de manière générique

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

"valeur" est ici la valeur que vous transmettez au champ inpu

0
dotista2008