web-dev-qa-db-fra.com

Angular angulaire) Datepicker matériel obtenir une valeur sur le changement

J'utilise la nouvelle version de angular et angular). Je dois obtenir la valeur du datepicker au moment où l'utilisateur changez la date pour ensuite passer cette valeur à une fonction et faire quelque chose.

datepicker

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>
  </mat-form-field>

et cela la fonction.

  public onChange(event: any, newDate: any): void {
    console.log(event.target.value);
    // this.getData(newDate);
  }
angulardatepickerangular-material
13
Miguel Angel Frias

Désolé, je n'ai pas posté la réponse auparavant, mais j'ai résolu le problème avec le commentaire de @ AJT_82. voici le code.

HTML du composant

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onDate($event)"></mat-datepicker>
  </mat-form-field>

composante ts

  public onDate(event): void {
    this.roomsFilter.date = event;
    this.getData(this.roomsFilter.date);
  }

Fondamentalement, je viens de passer le $event du datepicker pour obtenir la valeur.

9
Miguel Angel Frias
<mat-form-field>
  <input matInput [matDatepicker]="expiration1" placeholder="Expiration" [formControl]="expiration" required (dateChange)="EndDateChange($event)">
  <mat-datepicker-toggle matSuffix [for]="expiration1"></mat-datepicker-toggle>
  <mat-datepicker #expiration1></mat-datepicker>
</mat-form-field>

S'il vous plaît vérifier ce lien de démonstration afin que vous aurez plus d'idée. Exemple

14
Mikinj Mistry