使用自定义日期格式后 jQGrid DateFilter 不工作

Question

您好，我正在使用 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'); 
   }
}

Answer 1

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

下面的代码和示例 link：

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 完全符合您的设置

使用自定义日期格式后 jQGrid DateFilter 不工作

jQGrid DateFilter not working after using custom date format

jqgrid

jqgrid-formatter