В angular фильтр диапазона дат slickgrid не работает для одной даты. Я упомянул здесь проблему, которая возникает в примере библиотеки slickgrid. Пожалуйста, обратитесь к этому примеру video и
. По этой причине я пытаюсь создать пользовательский фильтр для поля даты на основе моих собственных требований. Но этот фильтр всегда возвращает пустое значение. Я поделился своим собственным классом фильтра даты со диапазоном дат stati c. Пожалуйста, дайте решение для моего случая.
import {
Column,
ColumnFilter,
Filter,
FilterArguments,
FilterCallback,
GridOption,
OperatorType,
OperatorString,
SearchTerm,
} from 'angular-slickgrid';
// using external non-typed js libraries
declare var $: any;
export class CustomDateFilter implements Filter {
private _clearFilterTriggered = false;
private $filterElm: any;
grid: any;
searchTerms: SearchTerm[];
columnDef: Column;
callback: FilterCallback;
operator: OperatorType | OperatorString = OperatorType.rangeInclusive;
constructor() { }
/** Getter for the Column Filter */
get columnFilter(): ColumnFilter {
return this.columnDef && this.columnDef.filter || {};
}
/** Getter for the Grid Options pulled through the Grid Object */
get gridOptions(): GridOption {
return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
}
/**
* Initialize the Filter
*/
init(args: FilterArguments) {
this.grid = args.grid;
this.callback = args.callback;
this.columnDef = args.columnDef;
this.searchTerms = args.searchTerms || [];
// filter input can only have 1 search term, so we will use the 1st array index if it exist
const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || '';
// step 1, create HTML string template
const filterTemplate = this.buildTemplateHtmlString();
// step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
// step 3, subscribe to the keyup event and run the callback when that happens
this.$filterElm.keyup((e: any) => {
let value = e && e.target && e.target.value || '';
if (typeof value === 'string' && this.columnFilter.enableTrimWhiteSpace) {
value = value.trim();
}
/* ################################################### */
// Static filter range for testing
var fromDate = new Date(2020, 2, 9, 0, 0, 0, 0);
var toDate = new Date(2021, 2, 9, 23, 59, 59, 999);
/* ################################################### */
if (this._clearFilterTriggered) {
this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered });
this._clearFilterTriggered = false; // reset flag for next use
this.$filterElm.removeClass('filled');
} else {
value === '' ? this.$filterElm.removeClass('filled') : this.$filterElm.addClass('filled');
this.callback(e, { columnDef: this.columnDef, searchTerms: [fromDate, toDate] });
}
});
}
/**
* Clear the filter value
*/
clear() {
if (this.$filterElm) {
this._clearFilterTriggered = true;
this.$filterElm.val('');
this.$filterElm.trigger('keyup');
}
}
/**
* destroy the filter
*/
destroy() {
if (this.$filterElm) {
this.$filterElm.off('keyup').remove();
}
}
/**
* Set value(s) on the DOM element
*/
setValues(values) {
if (values) {
this.$filterElm.val(values);
}
}
//
// private functions
// ------------------
/**
* Create the HTML template as a string
*/
private buildTemplateHtmlString() {
let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
if (this.columnFilter && this.columnFilter.placeholder) {
placeholder = this.columnFilter.placeholder;
}
return `<input type="text" class="form-control search-filter" placeholder="${placeholder}">`;
}
/**
* From the html template string, create a DOM element
* @param filterTemplate
*/
private createDomElement(filterTemplate: string, searchTerm?: SearchTerm) {
const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
$($headerElm).empty();
// create the DOM element & add an ID and filter class
const $filterElm = $(filterTemplate);
$filterElm.val(searchTerm);
$filterElm.attr('id', `filter-${this.columnDef.id}`);
$filterElm.data('columnId', this.columnDef.id);
// append the new DOM element to the header row
if ($filterElm && typeof $filterElm.appendTo === 'function') {
$filterElm.appendTo($headerElm);
}
return $filterElm;
}
}
Здесь я предоставил мой набор данных и определение столбца
public dataset = [{
"employee_name": "Abhishek",
"employee_id": 12394,
"rating": 4.5,
"birth_date": new Date(702153000000), // Thu Apr 02 1992 00:00:00
"joining_date": new Date(1388514600000), // Wed Jan 01 2014 00:00:00
"created_on": new Date(1585810780143), // Thu Apr 02 2020 12:29:40
"contact_info": {
"phone": "044 - 28255955",
"address": "11, Srinivasa Pillai St, Egmore, Chennai, Tamil Nadu, 600008",
"mail": "example@example.com"
}
}]
public columnDefinition: Array < Column > = [{
id: "birth_date",
name: "Birth date",
field: "birth_date",
sortable: true,
type: FieldType.date,
formatter: DateTimeFormatter, // Formatter to convert unix timestamps to user defined formatted date string
params: {
dateFormat: this.userDefinedDateFormat
},
filterable: true,
filter: {
model: new CustomDateFilter()
}
}, {
id: "created_on",
name: "Created on",
field: "created_on",
sortable: true,
type: FieldType.dateTime,
formatter: DateTimeFormatter, // Formatter to convert unix timestamps to user defined formatted date string
params: {
dateFormat: this.userDefinedDateTimeFormat
},
filterable: true,
filter: {
model: Filters.dateRange
}
}]
В пользовательском фильтре я передаю следующий searchTerm в FilterCallback
CustomDateFilter.ts
callback: FilterCallback; // Global variable
// on keyup following code implemented
var fromDate = new Date(1991, 0, 1, 0, 0, 0, 0); // Tue Jan 01 1991 00:00:00
var toDate = new Date(1992, 11, 31, 23, 59, 59, 999); // Thu Dec 31 1992 23:59:59
this.callback(e, { columnDef: this.columnDef, searchTerms: [fromDate, toDate] });
Поле данных моего дня рождения соответствует критериям, но оно возвращает пустое представление.
Фильтр диапазона дат по умолчанию работает только для диапазона, не работающего для одной даты. Пожалуйста, обратитесь к следующим изображениям для ясного понимания
Рисунок 1 - Фильтр по умолчанию, работающий для диапазона дат
Рисунок 2 - Фильтр по умолчанию не работает на одну дату
Снимки экрана, сделанные с https://ghiscoding.github.io/Angular-Slickgrid/# / диапазон
Версия программного обеспечения
Angular: 7.3.5
Angular -Slickgrid: 2.17.10
TypeScript: 3.1.6
Операционная система: Windows 10
Узел: 10.16.3
NPM: 6.9.0