Angular slickgrid custom date filter not working for date range

Question

In angular slickgrid date range filter not working for single date. I mentioned the issue here which is occurring in slickgrid library example. Please refer this video and example

For these reason, i am trying to create custom filter for date field based on my own requirement. But that filter always returning empty value. I shared my custom date filter class with static date range. Please give the solution for my case.

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

---

Here i provided my dataset and column definition

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": "[email protected]"
    }
}]


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

In custom filter, i am passing following searchTerm to 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] });

My data birth_date field meets the criteria but it returns empty view.

---

Default date range filter only working for range not working for single date. Please refer following images for clear understanding

Fig 1 - Default filter working for date range

Fig 2 - Default filter not working for single date

Screenshots taken from https://ghiscoding.github.io/Angular-Slickgrid/#/range

---

Software Version

Angular : 7.3.5

Angular-Slickgrid : 2.17.10

TypeScript : 3.1.6

Operating System : Windows 10

Node : 10.16.3

NPM : 6.9.0