Add DatePicker range in single column of jqgrid filter

Question

I’ve been able to add a datepicker into the filter toolbar of a jqgrid with the code below. However, I’m wondering if there’s a way to squeeze two datepickers into this single DateCreated column, so as to specify the range (From, To). Any ideas?

function loadGrid() {
    $(tableID).jqGrid({
    …
    colModel: [
    …
    { name: 'DateCreated', index: 'DateCreated', width: 125, searchoptions:{dataInit:datePick, att:{title:'Select Date'}} },
    …
    })
…
}

datePick = function(elem) {
    $(elem).datepicker();
}

Answer 1

I had to do the very same thing, and Joseph's answer above got me 90% of the way there. So, most of the credit is due to him. I had to modify some stuff to get it to work because the filament date range picker allows for single dates (the today option, the specific date option, etc). I also had to add some code to trigger the search after you selected your date. Here's my update...the meat of what I needed to add was in the beginRequest function:

$(document).ready(function() {
        var grid = jQuery('#list').jqGrid({
            url: '/myajaxurl',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Reference #', 'CreatedOn', 'Product', 'Model Number', 'Quantity', 'Transaction Type', 'Created By'],
            colModel: [
                { name: 'InventoryTransactionLogId', index: 'InventoryTransactionLogId', align: 'center', sortable: true, search: false },
                {
                    name: 'CreatedOn',
                    search: true,
                    stype: 'text',
                    align: 'center',
                    formatter: 'date',
                    formatoptions: { newformat: 'm-d-y  H:i' },
                    sortable: true,
                    searchoptions: {
                        dataInit: function(el) {
                            $(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick });
                        }
                    }
                },
                { name: 'ProductName', index: 'ProductName', align: 'center', sortable: true, search: false },
                { name: 'ModelNo', index: 'ModelNo', align: 'center', sortable: true, search: true },
                { name: 'Quantity', index: 'Quantity', align: 'center', sortable: true, search: false },
                { name: 'Description', index: 'Description', align: 'center', sortable: true, search: false },
                { name: 'UserName', index: 'UserName', align: 'center', sortable: true, search: false }
            ],
            loadtext: "Retrieving Inventory Transaction Log...",
            rowNum: 50,
            rowList: [25, 50, 100],
            sortname: 'InventoryTransactionLogId',
            sortorder: 'asc',
            pager: '#pager',
            ignoreCase: true,
            viewrecords: true,
            height: 450,
            autowidth: true,
            scrollOffset: 45,
            caption: 'Inventory Transaction Log',
            emptyrecords: "No records",
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                cell: 'cell',
                id: 'InventoryTransactionLogId',
                userdata: 'userdata'
            },
            beforeRequest: function () {
                var theGrid = jQuery("#list");
                var postData = theGrid.jqGrid('getGridParam', 'postData');
                if (postData != undefined && postData.filters != undefined) {
                    postData.filters = jQuery.jgrid.parse(postData.filters);
                    //Remove if current field exists
                    postData.filters.rules = jQuery.grep(postData.filters.rules, function(value) {
                        if (value.field != 'CreatedOn')
                            return value;
                    });

                    // Parse the range picker field into start/end date
                    var dateRangeString = $('#gs_CreatedOn').val();

                    if (dateRangeString.length > 0) {
                        var dateRange = dateRangeString.split(' - ');

                        if (dateRange.length == 1) {
                            startDate = dateRange[0] + ' 00:00:00';
                            endDate = dateRange[0] + ' 23:59:59.999';
                        } else {
                            startDate = dateRange[0] + ' 00:00:00';
                            endDate = dateRange[1] + ' 23:59:59.999';
                        }

                        var startDateFilter = { "field": "CreatedOn", "op": "ge", "data": startDate };
                        var endDateFilter = { "field": "CreatedOn", "op": "le", "data": endDate };

                        // Add new filters
                        postData.filters.rules.push(startDateFilter);
                        postData.filters.rules.push(endDateFilter);
                    }
                } else {
                    jQuery.extend(postData, {

                    });

                }

                if (postData != undefined && postData.filters != undefined) {
                    postData.filters = JSON.stringify(postData.filters);
                    postData._search = true;
                }
                return [true, ''];
            }
        });

        $('.date').datepicker();
        grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "bw" });
        grid.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false });

    });

    datePick = function() {
        var grid = $("#list");

        $("#list")[0].triggerToolbar();
        $("#list").trigger("reloadGrid", [{ page: 1 }]);
    }

Answer 2

If you are open to adding in a plugin, I found the range picker from filament group to be very easy to work with. In under an hour, I had the 3 files downloaded and installed into my project, and the range picker working.

link:filament group daterangepicker

Being that I'm using jquery 1.8 in my project, I ended up getting an updated version from

link:Github filament group daterangepicker jquery 1.8

daterangepicker is also able to take all of the options that datepicker supports, so you shouldn't have much trouble converting. Let me know if you have questions and I'll see if I can help.

For reference, the plugin is dual licensed with MIT and GPL. This is the same license structure as jqgrid, so I assume if you are able to use jqgrid, than this plugin should not be a problem.

UPDATE: Adding Code Example

The important part of this code is in the colModel for date. You simply specify a dataInit function for the search options, then add the daterangepicker. Be careful on the capitalization. That got me more than once. The beforeSelectRow is simply some modification I did in order to make my checkboxes along the side behave as a radio button. It is not needed for daterangepicker to work.

$("#myGrid").jqGrid(
            {
                url:url,
                datatype: "json",
                colNames:['Version','Date'],
                colModel:[ 
                          {name:'version', search:true, stype:'text'},
                          {name:'date', search:true,stype:"text",searchoptions:{dataInit:function(el){
                              $(el).daterangepicker({dateFormat:'yy/mm/dd'});
                            } 
                          }}  
                          ],                                  
                          toolbarfilter: true,
                          sortname: 'version',
                          sortorder: "desc", 
                          pager: jQuery('#myPager'),
                          viewrecords: true,
                          gridview: true,
                          multiselect: true,
                          beforeSelectRow: function(rowId)
                          {
                              var selectedIds = jQuery('#myGrid').jqGrid().getGridParam("selarrrow");
                              jQuery("#myGrid").jqGrid().resetSelection();
                              if(selectedIds)
                              {
                                  var id = selectedIds[0]
                                  if(id != rowId)
                                  {
                                      jQuery("#myGrid").jqGrid().setSelection(rowId, false);
                                  }
                              }
                              else
                              {
                                  jQuery("#myGrid").jqGrid().setSelection(rowId, false);
                              }
                          }     
            });