Jqgrid search for dates is 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 above is my jqgrid code. I have problem in searching the date field(matchFromDate). I went across many answers given in this forum but still I couldn't achieve the date search.

From json I'm getting the date like this '1432683305000'

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

Can anyone please help me in resolving this issue? Thank you very much in advance

Answer 1

It seems to me that main problem in your code is the usage of formatoptions:{srcformat: "U/1000"} in your code. Such property can format the code, but it will save the original values of date in the local grid data. Later you try to use jQuery UI Datepicker and it have problem to use the date in the format. You can use @ syntax (see the documentation) but you will still have two problems. The first one: the date will be displayed in the datepicker in the Unix timestamp format which is not good. The second problem: the formatoptions:{srcformat: "U/1000"} saves 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 data.

So I suggest you to 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 cut the hour, min, ... parts of the input data and convert it to the string with the format close to ISO 8601.

The jsfiddle demo uses the above code and some other settings which could be helpful for you: column templates, onSelect callback of datepicker and some other. I uses free jqGrid (currently in the version 4.9 RC1) instead of Guriddo jqGrid JS 4.8.2, but I tried almost not use free jqGrid specific features (see wiki), so it should work with Guriddo jqGrid too.