angular 2 - primeng dataTable为日期字段添加过滤器,包含日期范围

时间:2017-09-15 19:17:38

标签: angular momentjs primeng primeng-datatable

假设我有这个数据表

<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;过滤日期。等等

1 个答案:

答案 0 :(得分:0)

我认为startDate字段是JS Date对象(它也可以是时间戳整数)。 FIlter的决议是一天(1天,30天等等)。

  1. 创建其他隐藏字段,该字段将保存给定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>
    
  2. 使用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');
    }
    
  3. 过滤由下拉列表更改事件触发:

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

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