仅在日期时使用日期选择器过滤jqGrid datetime列 [英] Filtering jqGrid datetime columns using date picker just on date

问题描述

我目前遇到一个问题，其中我在网格中有datetime列，这些列的格式设置为仅显示字段的日期部分.因此原始数据看起来像是"2015-04-15T15:31:49.357"，而网格列看起来像是"2015/4/15".

I currently have an issue where I have datetime columns in a grid that are formatted to only display the date portion of the field. So the raw data looks like "2015-04-15T15:31:49.357" and the grid column looks like "4/15/2015".

我正在使用日期选择器来支持列过滤，并且希望能够使用"eq"运算符在日期部分使用等于"进行过滤.目前我没有任何比赛，因为时间不多了.

I am using a datepicker to support column filtering and would like to be able to use the "eq" operator to filter using "equals" but just on the date portion. Currently I do not get any matches because the time is getting in the way.

有可能解决这个问题吗?我知道我可以操纵原始数据以除去日期的时间部分，但是我更希望将这些信息保留在原始数据中，因为我也支持导出到excel并可能需要时间.

Is it possible to get around this? I know I can manipulate the raw data to strip off the time portion of the date, but I would prefer to keep that information in the raw data since I also support exporting to excel and the time might be needed.

我当前对该列的选择是:

My current options for the column are:

          formatter = "date";
          formatoptions = {srcformat: "Y-m-d", newformat: "n/j/Y"};

我尝试了各种选择，但到目前为止还没有任何运气.

I have tried various options but so far have not had any luck.

我也在使用free-jqgrid fork.

I am also using the free-jqgrid fork.

推荐答案

我介绍了自定义过滤功能可轻松实现青年时代. 答案提供了此类实现的示例.

I introduced custom filtering feature in free jqGrid to allow easy implements the scenarios like youth. The answer provide an example of such implementation.

在您的情况下，例如，可以在短名称"deq"下定义新的Date only "equal" compare操作，并在短名称dne下定义比较操作Date only "not equal". customSortOperations选项的代码可能如下:

In your case one can define new Date only "equal"compare operation under the short name "deq" for example and the compare operation Date only "not equal" under the short name dne. The code of customSortOperations option could be the following:

customSortOperations: {
    deq: {
        operand: "==",
        text: "Date only \"equal\"",
        filter: function (options) {
            var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
                newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                        cm.formatoptions.newformat :
                        $(this).jqGrid("getGridRes", "formatter.date.newformat"),
                srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                        cm.formatoptions.srcformat :
                        $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
                fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
                searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
            return fieldData.getFullYear() === searchValue.getFullYear() &&
                fieldData.getMonth() === searchValue.getMonth() &&
                fieldData.getDate() === searchValue.getDate();
        }
    },
    dne: {
        operand: "!=",
        text: "Date only \"not equal\"",
        filter: function (options) {
            var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
                newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                        cm.formatoptions.newformat :
                        $(this).jqGrid("getGridRes", "formatter.date.newformat"),
                srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                        cm.formatoptions.srcformat :
                        $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
                fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
                searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
            return fieldData.getFullYear() !== searchValue.getFullYear() ||
                fieldData.getMonth() !== searchValue.getMonth() ||
                fieldData.getDate() !== searchValue.getDate();
        }
    }
}

为了能够使用新的"deq"和"dne"操作，您应该在其中添加日期的列searchoptions的sopt中.

To be able to use new "deq" and "dne" operation you should include there in sopt of searchoptions of the column with the date.

该演示使用上述代码.输入数据包含3个日期:"2015-04-15T15:31:49.357"，"2015-04-15T21:15:40.123"，"2015-04-15":

The demo uses the above code. The input data contains 3 dates: "2015-04-15T15:31:49.357", "2015-04-15T21:15:40.123", "2015-04-15":

var mydata = [
        { id: "10",  invdate: "2015-04-15T15:31:49.357", name: "test1",... },
        { id: "20",  invdate: "2015-04-15T21:15:40.123", name: "test2",... },
        { id: "30",  invdate: "2015-04-15", name: "test3", ...},
        ...
    ]

通过15-Apr-2015进行的过滤将显示所有三行:

The filtering by 15-Apr-2015 display all the three rows:

另一个演示使用了几乎相同的代码，但是以完整的日期/时间格式显示日期.尽管如此，过滤仍然有效.请注意，在演示中，我使用了来自GitHub的最新免费jqGrid资源.这真的很需要，因为我在parseDate的代码中做了一些小的更改使该演示正常工作.

Another demo uses practically the same code, but displays the date in full date/time format. Nevertheless the filtering works. Be carefully, that I use the latest free jqGrid sources from GitHub in the demo. It's really needed because I made some small changes in the code of parseDate to make the demo working.

这篇关于仅在日期时使用日期选择器过滤jqGrid datetime列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！