Add datepicker range to single jqgrid filter column

Question

Ive been able to add a datepicker to the jqgrid filter toolbar with the code below. However, I wonder if theres a way to squeeze two finalists into this single DateCreated column to specify a 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

If you are open to add to the plugin, I found that selecting a range from a group of threads is very easy to use. Within an hour, 3 files were downloaded and installed into my project, and the range selection command works.

link: thread group daterangepicker

Being what I'm using jquery 1.8 in my project, I got an updated version

reference: Github filament group daterangepicker jquery 1.8

daterangepicker can also accept all parameters supported by datepicker, so you don’t have to convert a lot of problems. Let me know if you have any questions and I'll see if I can help.

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

UPDATE: Adding Code Sample

The important part of this code is in colModel for the date. You simply specify the dataInit function for the search parameters, and then add the daterangepicker. Be careful with capitalization. This is me more than once. BeforeSelectRow is just some kind of modification that I made to make my flags along the side as a switch. For daterangepicker is not required 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); } } }); 

Answer 2

I had to do the same, and Joseph's answer above got me 90% of the way. Thus, most of the loan belongs to him. I had to modify some things to make it work, because choosing the date range of the thread allows you to use single dates (today's option, a specific date parameter, etc.). I also had to add code to start the search after you selected the 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: 'mdy 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 }]); }