jquery - JQGrid で日付範囲を処理するように検索ルールをカスタマイズする方法

Question

サーバーから一度データをロードし、高度な検索とツールバーの検索でデータをローカルでフィルタリングしています。のように特定の日付をフィルタリングする必要がある日時列があります。

(2013/01/01 --to--> 2013/01/05)

他の列に適用された他のフィルターと組み合わせて検索を適用しています。

次のバージョンを使用しています。

 jQuery: 1.9.1
 jQuery-UI: 1.10.0
 jQGrid: 4.4.4 
 dateRangePicker: http://www.filamentgroup.com/examples/daterangepicker

ここに私のコードがあります:

    var grid;

    var filters = { groupOp: "AND", rules: [] };

    var toolbarSearchOpts = {
        defaultSearch: "cn",
        multipleSearch: true,
        multipleGroup: false,

        stringResult: true,
        closeOnEscape: true,
        closeAfterSearch: true,
        closeAfterReset: true,
        searchOnEnter: false,

        ignoreCase: true
    };

    $(function () {
        grid = $("#Grid");
        grid.jqGrid({
            url: 'TestHandler.ashx',
            datatype: 'json',
            autowidth: false,
            shrinkToFit: true,
            width: 600,
            height: 'auto',
            colNames: ['ID', 'Created Date'],
            colModel: [
                        { name: 'ID', width: '50%', index: 'ID', key: true, sortable: true, sorttype: "int", searchtype: "integer", searchrules: { "required": true, "number": true, "maxValue": 2000 }, searchoptions: { sopt: ['cn', 'eq', 'ne', 'gt', 'lt', 'ge', 'le', 'bw']} },
                        { name: 'CreatedOn', width: '50%', index: 'CreatedOn', align: 'center', sortable: true, searchtype: "date", datefmt: "Y/m/d h:i",
                            /*searchrules: { custom: true, custom_func: searchRange }, */
                            searchoptions: {
                                sopt: ['cn']
                            , dataInit: function (el) { $(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick }); }
                            , beforeSearch: function () {
                                console.log('beforeSearch at ' + ' ' + (new Date()).toLocaleTimeString());
                            }
                            , attr: { title: "Select Date" }
                            }
                        }
                    ],
            rowNum: 500,
            rownumbers: true,
            rowList: [50, 100, 200, 500],
            pager: '#GridPager',
            toppager: true,
            gridview: true,
            viewrecords: true,
            sortname: 'ID',
            sortorder: 'desc',

            loadonce: true,
            cache: true,
            multiselect: true,
            repeatitems: false,

            loadComplete: function () {
                grid.jqGrid('navGrid', '#GridPager', { view: false, add: false, edit: false, del: false, cloneToTop: true }, 
                            {}, // settings for edit
                            {}, // settings for add
                            {},  //settings for delete
                            {multipleSearch: true, multipleGroup: false, stringResult: true, defaultSearch: "cn", ignoreCase: true}, // enable the advanced searching
                            {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
                            );
                grid.jqGrid('filterToolbar', toolbarSearchOpts);
            },
            caption: 'Test'
        });

    });

    datePick = function () {
        grid[0].triggerToolbar();
        grid.trigger('reloadGrid', [{ page: 1}]);
    }

    searchRange = function (value, columnName) {
        //Value seems to be null here on using cust search. 
        //How to get the applied search rules and modify the same??
        //For date range
        filters.rules.push({ field: "CreatedOn", op: "ge", data: "2013/02/01" });
        filters.rules.push({ field: "CreatedOn", op: "le", data: "2013/02/24" });
        // for specific dates
        //filters.rules.push({ field: "CreatedOn", op: "cn", data: "2013/02/24" });

        // add filters applied for other columns here??
        return filters.rules;
    }