Simple HTML5 date filter for ag-grid. Requires: moment.js

ag-date-filter.js

'use strict';

var moment = require('moment');

var template = '' +
    '<div class="ag-date-custom-filter">' +
    '	<select ng-model="queryType">' +
    '		<option value="exact">Exact</option>' +
    '		<option value="between">Between</option>' +
    '	</select>' +
    '	<input ng-model="dateOne" type="date">' +
    '	<input ng-model="dateTwo" ng-show="queryType == \'between\'" type="date">' +
    '</div>';

function DateFilter () {}
    
DateFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.$scope = params.$scope;
    this.$scope.queryType = 'exact';
    this.$scope.$watch('[queryType, dateOne, dateTwo]', params.filterChangedCallback);
};
    
DateFilter.prototype.getGui = function () {
    var element = document.createElement('div');
    element.innerHTML = template;
    return element;
};

DateFilter.prototype.isFilterActive = function () {
    var scope = this.$scope;

    if (scope.queryType == 'exact') {
        return !!scope.dateOne;
    } else if (scope.queryType == 'between') {
        return !!scope.dateOne && !!scope.dateTwo;
    }

    return false;
};

DateFilter.prototype.doesFilterPass = function (params) {
    var scope = this.$scope;
    var value = this.valueGetter(params.node);

    if (scope.queryType == 'exact') {
        return moment(value).isSame(scope.dateOne, 'day');
    } else if (scope.queryType == 'between') {
        return moment(value).isBetween(scope.dateOne, scope.dateTwo);
    }
};

DateFilter.prototype.getApi = function () {
    var scope = this.$scope;
    
    return {
        getModel: function() {
            var model = {
                dateOne: scope.dateOne,
                dateTwo: scope.dateTwo,
                queryType: scope.queryType
            };
            return model;
        },
        setModel: function(model) {
            scope.dateOne = model.dateOne;
            scope.dateTwo = model.dateTwo;
            scope.queryType = model.queryType;
        }
    }
};

module.exports = DateFilter;

Hi,

I tried to use this filter but I am getting below error:

Uncaught TypeError: Cannot set property 'queryType' of null

Also in the documentation it is mentionned that there mandatory methods and your code is missing one of them:

// mandatory methods
MyCustomFilter.prototype.init = function (params) {}
MyCustomFilter.prototype.getGui = function () {}
MyCustomFilter.prototype.isFilterActive = function() {}
MyCustomFilter.prototype.doesFilterPass = function (params) {}
MyCustomFilter.prototype.getApi = function () {}

the method getApi() is missing.

Best Regards
HJ

One more thing, the $scope is null in params object.

It is ok, thanks, I missed to set angularCompileFilters:true

Thanks for this filter! I had to use the getFilterModel of the Grid Api, and this filter doesn't have the mandatory method. If anyone needs it, add this to the code:

DateFilter.prototype.getApi = function() {
    var scope = this.$scope;
    return {
        getModel: function() {
            var model = {dateOne: scope.dateOne, dateTwo: scope.dateTwo, queryType: scope.queryType};
            return model;
        },
        setModel: function(model) {
            scope.dateOne = model.dateOne;
            scope.dateTwo = model.dateTwo;
            scope.queryType = model.queryType;
        }
    }
};

This way you can output the filterModel and apply it somewhere else, useful when you have to replicate the grid for printing.
Cheers!

@LuckyHRE @HaythemJ Thank you for pointing out the missing required method. I have added your snippet to the Gist.