PrimeNG数据表日期范围过滤器 [英] PrimeNG datatable date range filter

问题描述

过滤日期范围 || 数据表

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

I need some help on how to filter date range..dateCreated

我想搜索在搜索输入中创建的日期，但似乎不起作用.没有找到记录.我正在搜索有关自定义过滤器的信息，而我却很难做到这一点.

I want to search date created in search input, but it seems, it's not working. No records found. I was searching about custom filter, and I'm having a hard time how to do it.

我正在使用momentjs.

I'm using momentjs.

推荐答案

"p-dataTable"已弃用，因此我的解决方案使用了较新的"p-table".

"p-dataTable" is deprecated and therefore my solution uses the newer "p-table".

要完成此任务，您需要为范围过滤器添加自己的约束:

Too accomplish this you need to add your own constraint for the range filter:

首先，您需要在组件中添加对表的引用:

First you need to add a reference to your table in your component:

@ViewChild('myTable') private _table: Table;

使用它向表filterConstraints数组添加新条目:

Use it to add a new entry to the tables filterConstraints array:

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添加到模块中.

Add a variable to hold the start and end date values and make sure you have the FormsModule added to your module:

dateFilters: any;

在您的模板中，您需要将此变量添加为p日历的模型.此外，还需要设置p日历的onSelect事件.您的模板应如下所示:

In your template you need to add this variable as the model for a p-calendar. Also the onSelect event of the p-calendar needs to be set. Your template should look like the following:

<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>

此示例表的数据和列定义如下所示:

The data and the column definition for this example table looks like the following:

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

我在这里设置了一个基本示例:

I setup a basic example here:

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

希望能让您感到震惊.

这篇关于PrimeNG数据表日期范围过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！