Question

在角度滑动日期范围过滤器中，单个日期无效。我在这里提到了在slickgrid库示例中出现的问题。请参阅此video和example

由于这些原因，我试图根据自己的要求为日期字段创建自定义过滤器。但是该过滤器总是返回空值。我与静态日期范围共享了自定义日期过滤器类。请为我的情况提供解决方案。

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

我的数据birth_date字段符合条件，但返回空视图。

默认日期范围过滤器仅适用于单个日期不适用的范围。请参考以下图片以了解清楚

图1-适用于日期范围的默认过滤器