jQGrid DateFilter not working after using custom date format

Question

Hi I am using jqGrid and my date src format is like Feb 27, 2018 7:22:43 PM So I have formatted it like

formatter: 'date', formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'}

Now, the filter is not working only for month I tried to add sorttype: 'date' option but after adding it filter stopped working for year and day as well.

I think I might have missed something in the formatoptions that is causing this Please advice.

I have done some changes Below is the updated code Please have a look.

{
        label: '<font size="2">SSC Support Approved Through Date</font>', 
        name:'supportApprovedThroughDate',
        index:'myDate',
		editable: true,formatter: 'date',
		sorttype: 'date',
		formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'},
		searchoptions: { 
                        sopt: ['eq'],
                        placeholder:'Filter By Approved Through  Date',
                        title:'Filter By Approved Through Date'
                       }
		},
		{
		     name : 'myDate',
			 hidden: true,
			 jsonmap : function(item) {
			 	console.log(item);// Not getting printed.
			  return  $.jgrid.parseDate.call($("#jqGrid")[0] , 'M d, Y g:i:s A', item.supportApprovedThroughDate , 'm/d/Y'); 
			}
}

Answer 1

In case of pure datatype local (i.e when loadonce is not used) we need to to add additionally a field myDate in the data in order to make this happen. In my case I use onInitGrid, but you can use any operation before to load the data in the grid.

Code and example link below:

var myData = [
  {
   id: 1,
   name: "aaz",
   supportApprovedThroughDate : 'Feb 27, 2018 7:22:43 PM'
  }, 
  {
   id: 2,
   name: "bbz",
   supportApprovedThroughDate : 'Feb 19, 2018 7:22:43 PM'
  },
  {
   id: 3,
   name: "ccz",
   supportApprovedThroughDate : 'Feb 27, 2018 7:22:43 PM'
  } 
];

$.jgrid.defaults.width = 600;
$.jgrid.defaults.responsive = true;


$("#gMain").jqGrid({
    data: myData,    
    datatype: "local",
    colModel: [{
        name: "id",
        index: "id",        
        width:80,
        editable:true
    },{
        name: "name",
        index: "name",
        searchoptions:{clearSearch:false},
        width:100,
        editable:true
    },{
        label: 'SSC Support', 
        name:'supportApprovedThroughDate',
        index:'myDate',
            editable: true,
          formatter: 'date',
            sorttype: 'date',
            formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'},
        searchoptions: { 
            sopt: ['eq'],
            placeholder:'Filter By Approved Through  Date',
            title:'Filter By Approved Through Date'
        }
    },{
            name : 'myDate',
              hidden: true,
              formatter : 'date',
        formatoptions : { srcformat:'m/d/Y', newformat : 'm/d/Y'}
    }],
    caption: "Test JqGrid",
    pager: '#pMain',
    search: true,
    shrinkToFit: false,    
    forceFit:false,
    autowidth:true, 
    rowNum:10,
    rowList:[10,20,30,50,100],
    onInitGrid : function() {
        for(var i=0, len=this.p.data.length; i<len;i++) {
            var row = this.p.data[i];
            row['myDate'] = $.jgrid.parseDate.call(this , 'M d, Y g:i:s A', row.supportApprovedThroughDate , 'm/d/Y');
        }
    }
});

$("#gMain").jqGrid('filterToolbar', {
    stringResult: true, 
    searchOnEnter: true,                                                                                 
    defaultSearch: 'cn'
});

Here is a jsfiddle example with exactly your settings