web-dev-qa-db-ja.com

Angular material Datepickerは変更時に値を取得する

angular and angular material。の新しいバージョンを使用しています。ユーザーが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>

そしてこの機能。

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

申し訳ありませんが、以前に回答を投稿しませんでしたが、@ AJT_82のコメントで問題を解決しました。ここにコードがあります。

コンポーネントHTML

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

コメントts

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

基本的には、datepickerの$eventを過ぎて値を取得します。

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>

このデモリンクを確認してください。そのため、より多くのアイデアが得られます。 例

14
Mikinj Mistry