Jqgrid date search not working

Question

jq(function(){ var token = window.location.href .substring(window.location.href .lastIndexOf('=') + 1); jq("#grid").jqGrid({ url:'/test/umpire/getFixtures', datatype: 'json', mtype: 'GET', colNames:['Category', 'Tournament','Date', 'Ground','Team 1','Team 2','Umpire 1','Umpire2','Umpire 3','Match Refree','Match Obsrver','Scorer 1','Scorer 2'], colModel:[ {name:'categoryName',index:'categoryName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10,readonly: 'readonly'}}, {name:'tournamentName',index:'tournamentName', width:200,editable:true, editrules:{required:true}, editoptions:{size:10}}, {name:'matchFromDate',index:'matchFromDate', width:100,formatter: "date",sorttype: "date",formatoptions:{srcformat: "U/1000", newformat: "m/d/Y"},search:true, searchoptions: {sopt: ['eq','ne'], dataInit : function (elem) { jq(elem).datepicker({dateFormat:'mm-dd-yy', changeYear: true, changeMonth: true, showButtonPanel: true, showOn: 'focus'}); }}}, {name:'groundName',index:'groundName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}, {name:'team1Name',index:'team1Name', width:150,editable:true, editrules:{required:true}, editoptions:{size:10}}, {name:'team2Name',index:'team2Name', width:150,editable:true, editrules:{required:true}, editoptions:{size:10}}, {name:'umpire1',index:'umpire1', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'umpire2',index:'umpire2', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'umpire3',index:'umpire3', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'matchRefree',index:'matchRefree', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'matchObserver',index:'matchObserver', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'scorer1',index:'scorer1', width:100,formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, {name:'scorer2',index:'scorer2', width:100, formatter: function (cellvalue, options, rowObject) { return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>'; }}, ], postData:{ filters:'{"groupOp":"AND","rules":[{"field":"matchFromDate","op":"gt","data":"2007-09-06"},{"field":"matchFromDate","op":"lt","data":"2007-10-04"}]}' }, editurl :"/test/home/?token=${token}", rowNum:20, shrinkToFit: true, rowList:[10,20,30], height: 400, autowidth: true, rownumbers: true, pager: '#pager', sortname: 'matchFromDate', viewrecords: true, height:"100%", sortorder: "asc", caption:"<h2>Assign Umpire</h2>", emptyrecords: "Empty records", loadonce: true, loadComplete: function(response) { console.log(JSON.stringify(response)) }, jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, cell: "cell", id: "tournamentID" } }); 

Hi, this is my jqgrid code. I have a problem finding a date field (matchFromDate). I looked through many of the answers presented in this forum, but still I could not get the search by date.

From json I get a date like this: "1432683305000"

My jQgrid version is 4.8.2 and I am using Spring MVC.

Can anyone help me in solving this problem? Thank you very much in advance

Answer 1

It seems to me that the main problem in your code is the use of formatoptions:{srcformat: "U/1000"} in your code. Such a property can format the code, but it saves the original date values ​​in the local grid data. Later you try to use jQuery UI Datepicker and it has a problem using date in format. You can use the @ syntax (see the documentation ), but you still have two problems. First: the date will be displayed in datepicker format in the Unix timeline format, which is not very good. The second problem: formatoptions:{srcformat: "U/1000"} keeps the dates unchanged (with hours, minutes, seconds of the input date), but you want to ignore hours, minutes, seconds and so on from the input.

Therefore, I suggest you use the following properties:

 formatter: "date", formatoptions: {newformat: "m/d/Y"}, jsonmap: function (obj) { var d = new Date(parseInt(obj.matchFromDate, 10)); return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); } 

with jsonmap , which reduces the hour, min, ... parts of the input and converts them to a string with a format close to ISO 8601.

The jsfiddle demo uses the above code and some other parameters that may help you: column templates, onSelect callback, and some others. I use free jqGrid (currently in version 4.9 RC1) instead of Guriddo jqGrid JS 4.8.2, but I almost did not use free jqGrid functions (see wiki ), so it should work with Guriddo jqGrid too.