angular 2 - primeng dataTable 为日期字段添加过滤器，具有日期范围答案

【问题标题】：angular 2 - primeng dataTable add filter for date field, with date rangeangular 2 - primeng dataTable 为日期字段添加过滤器，具有日期范围
【发布时间】：2017-09-15 19:17:37
【问题描述】：

假设我有这个数据表

<p-dataTable #dt [value]="list" selectionMode="multiple" [(selection)]="selection"  [rows]="2"[paginator]="true" >
       <p-column selectionMode="multiple"></p-column>
       <p-column field="startDate" header="description" [filter]="true"></p-column>

现在我想要一个过滤器，它可以根据“过去 1 天”、“过去 30 天”等过滤日期

【问题讨论】：

标签： angular momentjs primeng primeng-datatable

【解决方案1】：

我想startDate 字段是 JS 日期对象（它也可以是时间戳整数）。过滤器的分辨率是一天（1 天、30 天等）。

创建额外的隐藏字段，它将保存给定 startDate 字段值的日期表示，我称之为 dateFilter。例如，如果startDate 是“Sun Sep 17 2017 00:57:08 GMT+0300 (IDT)”，那么 dateFilter 将是“2017-09-17”：
```
<p-column field="dateFilter" header="Filter" hidden="true"></p-column>
```

使用 Prime ng 下拉菜单在 startDate 字段上创建 HTML 过滤器：

<p-column field="startDate" 
          header="Date" 
          [style]="{'overflow':'visible'}" 
          [sortable]="true">
  <ng-template let-col let-car="rowData" let-ri="rowIndex" pTemplate="body">
    <span>{{car[col.field] | date : 'dd-MM-y'}}</span>
  </ng-template>

  <ng-template pTemplate="filter" let-col>
    <p-dropdown [options]="filters" 
                [style]="{'width':'100%'}" 
                (onChange)="dt.filter($event.value, 'dateFilter', 'in')" 
                styleClass="ui-column-filter"></p-dropdown>
  </ng-template>
</p-column>

filters 对象包含表示日期的数组，例如，如果今天是 '2017-09-17'，则过去 3 天的过滤器应如下所示：

[
  '2017-09-17',
  '2017-09-16',
  '2017-09-15'
]

在我的示例中，我有 1、7 和 20 天的过滤器：

this.filters = [];
this.filters.push({label: 'All days', value: null});
this.filters.push({label: 'Last 1 day', value: [this.createFilterDate(currTime)]});
this.filters.push({label: 'Last 7 days', value: Array(...new Array(7)).map((item, index) => this.createFilterDate(currTime - index * 1000 * 60 * 60 * 24))});
this.filters.push({label: 'Last 20 days', value: Array(...new Array(20)).map((item, index) => this.createFilterDate(currTime - index * 1000 * 60 * 60 * 24))});

createFilterDate(time) {
  return this.datePipe.transform(new Date(time), 'yyyy-MM-dd');
}

过滤由下拉更改事件触发：

(onChange)="dt.filter($event.value, 'dateFilter', 'in')"

Plunker：https://plnkr.co/edit/ozZJ21SeNFVA16ng4NRl?p=preview

【讨论】：

currTime这个字段是什么，你没提到这个？
请查看我为您创建的 plunker。 currTime 是当前的 apoche 时间：const currTime = new Date().getTime();