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

Question

假设我有这个数据表

<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 天”等过滤日期

Answer 1

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

1. 创建额外的隐藏字段，它将保存给定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>
   

2. startDate使用 prime ng 下拉菜单在字段上创建 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