web-dev-qa-db-ja.com

PrimeNGデータテーブルの日付範囲フィルター

フィルター日付範囲 || データテーブル

日付範囲をフィルタリングする方法についていくつかの助けが必要です。

検索入力で作成した日付を検索したいのですが、動作しないようです。レコードが見つかりませんでした。私はカスタムフィルターについて検索していましたが、その方法を見つけるのに苦労しています。

私はmomentjsを使用しています。

javascriptangularprimengprimeng-datatableprimeng-calendar
7
graphicnerd

「p-dataTable」は非推奨であるため、私のソリューションでは新しい「p-table」を使用しています。

これを達成するには、範囲フィルターに独自の制約を追加する必要があります。

まず、コンポーネントへの参照をテーブルに追加する必要があります。

@ViewChild('myTable') private _table: Table;

これを使用して、テーブルのfilterConstraints配列に新しいエントリを追加します。

ngOnInit() {
  var _self = this;
  // this will be called from your templates onSelect event
  this._table.filterConstraints['dateRangeFilter'] = (value, filter): boolean => {
    // get the from/start value
    var s = _self.dateFilters[0].getTime();
    var e;
    // the to/end value might not be set
    // use the from/start date and add 1 day
    // or the to/end date and add 1 day
    if ( _self.dateFilters[1]) {
      e =  _self.dateFilters[1].getTime() + 86400000;
    } else {
      e = s + 86400000;
    }
    // compare it to the actual values
    return value.getTime() >= s && value.getTime() <= e;
  }
}

開始日と終了日の値を保持する変数を追加し、FormsModuleがモジュールに追加されていることを確認します。

dateFilters: any;

テンプレートで、この変数をpカレンダーのモデルとして追加する必要があります。また、pカレンダーのonSelectイベントを設定する必要があります。テンプレートは次のようになります。

<p-table #myTable [columns]="cols" [value]="data" [rows]="10">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">{{col.header}}</th>
    </tr>
    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <p-calendar
          [(ngModel)]="dateFilters"
          appendTo="body"
          *ngSwitchCase="'date'"
          selectionMode="range"
          [readonlyInput]="false"
          dateFormat="dd.mm.yy"
          (onSelect)="myTable.filter($event, col.field, 'dateRangeFilter')">
        </p-calendar>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns" [ngSwitch]="true">
        <span *ngSwitchCase="col.field === 'date'">{{rowData[col.field] | date}}</span>
        <span *ngSwitchDefault>{{rowData[col.field]}}</span>
      </td>
    </tr>
  </ng-template>
</p-table>

このサンプルテーブルのデータと列の定義は次のようになります。

this.data = [
  { date: new Date("2018-07-12"), title: "Test1", type: "123", comment: ""},
  { date: new Date("2018-07-13"), title: "Test2", type: "123", comment: ""}
];

this.cols = [
  { field: 'date', header: 'Date'},
  { field: 'title', header: 'Title'},
  { field: 'type', header: 'Type'},
  { field: 'comment', header: 'Comment'}
];

ここに基本的な例を設定します：

https://stackblitz.com/edit/angular-d252dr

それがあなたを驚かせることを願っています。

12
d.h.