Jsgrid: filterTemplate for datetime

[randall84]

How to implement filter in the header for datetime columns?

thanks

[tabalinas]

Put two datePickers to filterTemplate and return from filterValue object with structure { from: , to: } Use this object in loadData method of controller.

Like following:

var DateField = function(config) {
    jsGrid.Field.call(this, config);
};

DateField.prototype = new jsGrid.Field({
    sorter: function(date1, date2) {
        return new Date(date1) - new Date(date2);
    },    

    itemTemplate: function(value) {
        return new Date(value).toDateString();
    },

    filterTemplate: function() {
        var now = new Date();
        this._fromPicker = $("<input>").datepicker({ defaultDate: now.setFullYear(now.getFullYear() - 1) });
        this._toPicker = $("<input>").datepicker({ defaultDate: now.setFullYear(now.getFullYear() + 1) });
        return $("<div>").append(this._fromPicker).append(this._toPicker);
    },

    insertTemplate: function(value) {
        return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
    },

    editTemplate: function(value) {
        return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
    },

    insertValue: function() {
        return this._insertPicker.datepicker("getDate").toISOString();
    },

    editValue: function() {
        return this._editPicker.datepicker("getDate").toISOString();
    },

    filterValue: function() {
        return {
            from: this._fromPicker.datepicker("getDate"),
            to: this._toPicker.datepicker("getDate")
        };
    }
});

jsGrid.fields.date = DateField;

loadData: function(filter) {
    return $.grep(this.users, function(user) {
        return (!filter.Name || user.Name.indexOf(filter.Name) > -1) 
        && (!filter.RegisterDate.from || new Date(user.RegisterDate) >= filter.RegisterDate.from) 
        && (!filter.RegisterDate.to || new Date(user.RegisterDate) <= filter.RegisterDate.to)

    });
},

Here is working fiddle http://jsfiddle.net/tabalinas/doaw2zgs/

[pineliu]

This example works great except for one question - after enter the from and to date in the datepicker, press key Enter won't do the filtering, unless go to another filter input and press the key Enter. Is there a way to fix this? Thank you very much!

[tabalinas]

Yes, you should handle keypress on datepicker so that on Enter key the grid searches.

This is how it's done for text field:

        filterTemplate: function() {
            if(!this.filtering)
                return "";

            var grid = this._grid,
                $result = this.filterControl = this._createTextBox();

            if(this.autosearch) {
                $result.on("keypress", function(e) {
                    if(e.which === 13) {
                        grid.search();
                        e.preventDefault();
                    }
                });
            }

            return $result;
        },

You should attach this handler to both datepickers.

[pineliu]

Works great! Thanks a lot!

[tabalinas]

You are welcome!

[marinswk]

Hi i'm using this solution to handle a date search on my custom grid, i would like to add the possibility to search with the enter button , can you better explain how to attach it to this particular example?

[tabalinas]

Do you have an issue if you just attach handlers as described in the snippet?

var grid = this._grid;

this._fromPicker.on("keypress", function(e) {
    if(e.which === 13) {
        grid.search();
        e.preventDefault();
    }
});

this._toPicker.on("keypress", function(e) {
    if(e.which === 13) {
        grid.search();
        e.preventDefault();
    }
});

http://jsfiddle.net/doaw2zgs/15/

[marinswk]

Thank you for the reply , that solved the problem ! :D

[aqrohadi]

Hi, @pineliu @tabalinas can you help me?

i have a same problem about press key Enter won't do the filtering on datepicker. When i has following in your script, filtering press key enter on datepicker not works. Below is my script:

  var MyDateField = function(config) {
        jsGrid.Field.call(this, config);
    };

    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }

    MyDateField.prototype = new jsGrid.Field({
        sorter: function (date1, date2) {
            return new Date(date1) - new Date(date2);
        },

        itemTemplate: function (value) {
            // return new Date(value).toISOString();
            return formatDate(new Date(value));
        },

        insertTemplate: function (value) {
            return this._insertPicker = $("<input>").datepicker({defaultDate: new Date(),dateFormat: "yy-mm-dd"});

        },

        editTemplate: function (value) {
            return this._editPicker = $("<input>").datepicker({ dateFormat: "yy-mm-dd" }).datepicker("setDate", new Date(value));

        },

        filterTemplate: function(value) {
        if(!this.filtering)
        return this._filterPicker.datepicker({defaultDate: new Date(),dateFormat: "yy-mm-dd"});

        var grid = this._grid,
            $result = this.filterControl = this._createTextBox();

        if(this.autosearch) {
            $result.on("keypress", function(e) {
                if(e.which === 13) {
                    grid.search();
                    e.preventDefault();
                }
            });
        }
        $result.val(value);
        return $result;
        },

        insertValue: function () {
            var insertValue = this._insertPicker.datepicker("getDate");
            if (insertValue !== null && insertValue !== 'undefined') {
                return formatDate(this._insertPicker.datepicker("getDate"));//.toISOString();
            }
            return null;

        },

        editValue: function () {
            var editValue = this._editPicker.datepicker("getDate");
            if (editValue !== null && editValue !== 'undefined') {
                return formatDate(this._editPicker.datepicker("getDate"));//.toISOString();
            }
            return null;
        },


        filterValue: function() {
        var filterValue = this._filterPicker.datepicker("getDate");
            if (filterValue !== null && filterValue !== 'undefined') {
                return formatDate(this._filterPicker.datepicker("getDate"));//.toISOString();
            }
            return null;
        }
    });

    jsGrid.fields.myDateField = MyDateField;

Before i change filterTemplate eith code :
filterTemplate: function (value) {
return this._filterPicker = $("").datepicker({defaultDate: new Date(),dateFormat: "yy-mm-dd"});

        },

The filterTemplate it's works, but can't press key to see result.
What should i do, please help me. Thank you!