使用自定义日期格式后 jQGrid DateFilter 不起作用答案

【问题标题】：jQGrid DateFilter not working after using custom date format使用自定义日期格式后 jQGrid DateFilter 不起作用
【发布时间】：2018-08-07 05:21:39
【问题描述】：

您好，我正在使用 jqGrid，我的日期 src 格式类似于 2018 年 2 月 27 日晚上 7:22:43 所以我把它格式化了

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

现在，过滤器不仅在一个月内有效我尝试添加 sorttype: 'date' 选项，但添加后过滤器也停止工作年和日。

我想我可能错过了导致此问题的格式选项中的某些内容请指教。

我做了一些改变下面是更新的代码请看一下。

{
        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'); 
			}
}

【问题讨论】：

使用哪个版本的 jqGrid - Guriddo jqGrid、free-jqGrid 或 jqGrid
我们正在使用 jqGrid 5.0.1 guriddo.net
请看at this post，那里的问题类似，需要根据自己的需要进行调整
嗨，托尼，我已经按照链接尝试过，但如果可能的话它仍然无法正常工作，请您看看有问题的代码 sn-p
上述代码仅在数据类型为 local 或 loadonce 参数为 true 时有效。如果数据类型参数不是本地的并且您使用服务器端分页和搜索，您将需要在您的服务器中有逻辑以在日期上进行正确的搜索。在所有其他情况下，我们需要问题的工作示例

标签： jqgrid jqgrid-formatter

【解决方案1】：

如果是纯本地数据类型（即不使用 loadonce 时），我们需要在 data 中额外添加一个字段 myDate 以实现这一点。就我而言，我使用 onInitGrid，但您可以使用之前的任何操作将数据加载到网格中。

代码和示例链接如下：

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'
});

这是一个 jsfiddle example 与您的设置完全一致

【讨论】：