按日期过滤 TurboTable

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").是否有按日期或日期范围过滤的选项？

我想使用日历组件 select 一个日期范围，然后按这些日期过滤数据。我正在使用 Date 对象（我在 Table 中使用 DatePipe 显示）。现在 none 这些匹配模式提供了正确比较日期对象的选项。

解决方法是将日期存储为字符串，然后进行过滤。但这不是完美的解决方案，因为它会在将日期转换为字符串时产生问题，而且日期格式必须在任何地方都相同。所以也许有更好的选择来实现在 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 开始，primeng/table 组件上的 filterConstraints 属性似乎不再可用。我刚刚从 PrimeNG 6 升级到 8.0.3，现在看到以下内容：

error TS2339: Property 'filterConstraints' does not exist on type 'Table'

关于如下代码：

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

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

注意：我查看了 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 及更高版本

error TS2339: Property 'filterConstraints' does not exist on type 'Table'

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

import { Table } from 'primeng/table';
//angular 8 import { FilterUtils } from "primeng/api";
//angular 9 import { FilterUtils } from "primeng/utils";
import { FilterUtils } from "primeng/api";
...
@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');
}

按日期过滤 TurboTable

Filtering TurboTable by dates

primeng

angular

primeng-turbotable

Component.html

Component.ts

PrimeNG 8.0.3 及更高版本

PrimeNG 8.0.2 及更低版本

更新：针对 primeng 8.04 版