假设我有这个数据表
<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>
现在我想要一个过滤器,它可以根据&#39;过去1天&#39;过去30天&#39;过滤日期。等等
答案 0 :(得分:0)
我认为startDate
字段是JS Date对象(它也可以是时间戳整数)。 FIlter的决议是一天(1天,30天等等)。
创建其他隐藏字段,该字段将保存给定startDate
字段值的日期表示,我将其称为dateFilter
。例如,如果startDate
是'2017年9月17日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>
过滤器对象包含日期表示的数组,例如,如果今天是“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