javascript - PrimeNG 数据表日期范围过滤器
问题描述
我需要一些关于如何过滤日期范围的帮助..dateCreated
我想搜索在搜索输入中创建的日期,但它似乎不起作用。没有找到记录。我正在搜索自定义过滤器,但我很难做到。
我正在使用momentjs。
解决方案
“p-dataTable”已被弃用,因此我的解决方案使用较新的“p-table”。
要完成此操作,您需要为范围过滤器添加自己的约束:
首先,您需要在组件中添加对表的引用:
@ViewChild('myTable') private _table: Table;
使用它向表 filterConstraints 数组添加一个新条目:
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 添加到您的模块中:
dateFilters: any;
在您的模板中,您需要将此变量添加为 p 日历的模型。还需要设置 p 日历的 onSelect 事件。您的模板应如下所示:
<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>
此示例表的数据和列定义如下所示:
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'}
];
我在这里设置了一个基本示例(使用 primeNg v 6.0.1 测试):
https://stackblitz.com/edit/angular-d252dr
希望这能让你开始。
推荐阅读
- c++ - 通过霓虹灯实现灰度图像的opencv均值函数
- docker - Docker 步骤结果到日志文件 - Jenkins
- c# - Bamboo 显示测试用例为 0,即使应用程序中有测试用例
- javascript - 给定一个整数数组返回正数,其中存在等效的负数
- elasticsearch - Elasticsearch 中的一个自定义分析器中的多个标记器
- android - 当应用程序在 Oreo 的前台时启动服务时出现 IllegalStateException
- javascript - JavaScript - 获取浏览器支持的语言环境的完整列表
- python - 两个列表和声明
- c# - .net mvc 国际化使用资源文件仅返回英语
- c# - 在实体框架核心中没有将实体映射到表的方法