PrimeNG 数据表日期范围过滤器答案

【问题标题】：PrimeNG datatable date range filterPrimeNG 数据表日期范围过滤器
【发布时间】：2018-04-30 10:24:04
【问题描述】：

Filter date range || Datatable

我需要一些关于如何过滤日期范围的帮助..dateCreated

我想搜索在搜索输入中创建的日期，但它似乎不起作用。没有找到记录。我正在搜索自定义过滤器，但我很难做到。

我正在使用momentjs。

【问题讨论】：

标签： javascript angular primeng primeng-datatable primeng-calendar

【解决方案1】：

“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'}
];

我在这里设置了一个基本示例（使用 primeNg v 6.0.1 测试）：

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

希望这能让你开始。

【讨论】：

糟糕的解释，不利于绿色勾号 [已接受答案]
这节省了我的时间
如果您收到有关未定义 ViewChild 变量的错误，请将 filterConstraint 代码移至 ngAfterViewInit
这很好，但是当我在表上编辑数据并重新绑定数据时，this._table 为空。任何想法为什么？
如果没有最低限度的设置，我想我帮不了你太多。我设置了一个仍在工作的 stackblitz。因此，不妨尝试将其与您的设置进行比较。

【解决方案2】：

如果有人在使用 filterConstraints 时遇到问题并收到此错误：

Property 'filterConstraints' does not exist on type 'Table'

应该改用新的 FilterUtils。

例如：

this._table.filterConstraints['dateRangeFilter']

变成：

FilterUtils['dateRangeFilter']

过滤器将自动适用于您的表格

【讨论】：

【解决方案3】：

FilterConstraints 不再使用，请查看 PrimeNG 文档

https://primefaces.org/primeng/showcase/#/filterservice

import {FilterService} from 'primeng/api';
....
constructor(private filterService: FilterService) {}
....
this.filterService.register('dateRangeFilter', (value, filter): boolean => {
  //your code
}

【讨论】：