按日期

Question

我有简单的TurboTable，我想显示一些数据，还有日期。

  <p-table [value]="boxes" #dt>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th pSortableColumn="Number">
          Number
          <p-sortIcon field="Number"></p-sortIcon>
        </th>
        <th pSortableColumn="DateInserted">
          Interted at
          <p-sortIcon field="DateInserted"></p-sortIcon>
        </th>
      </tr>
      <tr>
        <th>
        <!-- Here is input to filter number -->
        </th>
        <th>
        <!-- Here I want to use Calendar component to select date range -->
        <p-calendar 
            [(ngModel)]="date"
            selectionMode="range"
            [readonlyInput]="true"
            dateFormat="dd.mm.yy"
            (onSelect)="onDateSelect($event)">
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-box>
      <tr [pSelectableRow]="box">
        <td>{{box.Number}}</td>
        <td>{{box.DateInserted | date}}</td>
      </tr>
    </ng-template>
  </p-table>

目前，Turbo Table仅提供一些在过滤器中使用的匹配模式（“startsWith”，“contains”，“endsWith”，“equals”和“in”）。是否有任何选项可以按日期（日期范围）进行过滤？我想使用Calendar组件选择日期范围，然后按这些日期过滤数据。我正在使用Date对象（我在表中使用DatePipe）。 现在，这些匹配模式都没有提供比较Date对象correctlty的选项。

解决方法是将日期存储为字符串，然后过滤正在运行。但是不是完美的解决方案，因为它会产生将日期转换为字符串的问题，日期格式也必须在任何地方都相同。那么也许有更好的选择来实现TurboTable中日期范围的过滤？

Answer 1

作为一种变通方法，您现在可以非常简单地添加自定义行为。

<p-calendar 
    [(ngModel)]="date"
    selectionMode="range"
    [readonlyInput]="true"
    dateFormat="dd.mm.yy"
    (onSelect)="dt.filter($event, 'DateInserted', 'my')">

然后，在您的组件中，您可以执行此操作：

import Table from 'primeng/table';
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        this._table.filterConstraints['my'] = (value, filter): boolean => {
            // Make sure the value and the filter are Dates
            return value.getTime() == filter.getTime();
        }
    }
}

Answer 2

看来，从PrimeNG 8.0.3开始，priming / table组件上的filterConstraints属性不再可用。我刚刚从PrimeNG 6升级到8.0.3，现在看到以下内容：

  

错误TS2339：类型“表”上不存在属性'filterConstraints'

有关以下代码：

    this.mydt.filterConstraints['dateRangeFilter'] = (value, filters): boolean => { ...

我知道PrimeNG 8现在支持日期过滤，但这是一个日期RANGE过滤器，我们也在其他地方进行一些自定义过滤。是否已删除在PrimeNG表组件中实现自定义过滤功能的选项？

注意：我查看了GitHub上的最新更改，可以发现filterConstraints最近是从Table组件中重构出来的。我将PrimeNG降级为8.0.2，现在一切正常。

Answer 3

Component.html

<p-calendar 
    [(ngModel)]="date"
    selectionMode="range"
    [readonlyInput]="true"
    dateFormat="dd.mm.yy"
    (onSelect)="dt.filter($event, 'DateInserted', 'myCustomFilter')">

Component.ts

PrimeNG 8.0.3及更高版本

  

错误TS2339：类型“表”上不存在属性“ filterConstraints”

filterConstraints已在提交658507f中替换为FilterUtils。

import Table from 'primeng/table';
import { FilterUtils } from "primeng/utils";
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        FilterUtils['myCustomFilter'] = (value, filter): boolean => {
            return value.getTime() == filter.getTime();
        }
    }
}

PrimeNG 8.0.2及更低版本

import Table from 'primeng/table';
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        this._table.filterConstraints['myCustomFilter'] = (value, filter): boolean => {
            return value.getTime() == filter.getTime();
        }
    }
}

Answer 4

更新：对于Primeng版本8.04

我刚刚编写了一个自定义过滤器，使用了@ binary-alchemist提供的答案以及搜索了几个小时后的其他答案。它有效，所以我要共享代码：

import { FilterUtils } from 'primeng/components/utils/filterutils';
...
...
ngOnInit()
{
    FilterUtils['numberInBetween'] = (value: number, filter: [number, number]) =>
    {
        if (filter === undefined || filter === null)
        {
            return true;
        }

        if (value === undefined || value === null)
        {
            return false;
        }

        return value >= filter[0] && value <= filter[1];
    };
...
...
}
applyFilter(event , dt) {
    // id is the column name , start and end are two numbers , used for filtering id in between them
    dt.filter([start, end], 'id', 'numberInBetween');
}