将Kendo Grid列显示为DateTime，但在过滤时忽略Time

Question

我有一个剑道网格和一个列“销售时间”显示为MM / dd / yyyy HH：mm a（2015年1月3日下午2:34）。

现在，我只想按日期过滤，而忽略时间。 但默认情况下，过滤器正在查看时间，因此使用“Is Equal To”过滤的任何日期都不会返回任何结果。

这是我用来说明问题的JSFiddle： http ： //jsfiddle.net/dmathisen/yx7huvxp/

和一些代码，所以我可以发布jsfiddle链接:)

columns: [
    { field: "ModelName", title: "Model" },
    { field: "DefaultMonoCPP", title: "Mono Cost" },
    { field: "SaleTime", title: "Sale Time", format: "{0:g}" }
]

Answer 1

您可以定义一个schema.parse产生所谓的附加字段功能SaleDate仅包含Date的一部分SaleTime 。

然后，在显示网格中的列时，使用此选项。

就像是：

// Schema definition
schema: {
    model: {
        id: "ModelID",
        fields: {
            ModelName: { type: "string" },
            DefaultMonoCPP: { type: "number" },
            SaleTime: { type: "date" },
            SaleDate: { type: "date" }  // Additional field with the `Date` of `SaleTime`
        }
    },
    parse: function(d) {
        $.each(d, function(idx, elem) {
            // Compute SaleDate from SaleTime
            elem.SaleDate = kendo.parseDate(elem.SaleTime, "MM/dd/yyyy");
        });
        return d;
    }        
}

// Columns definition
columns: [
    {
        field: "ModelName",
        title: "Model"
    },
    {
        field: "DefaultMonoCPP",
        title: "Mono Cost"
    },
    {
        field: "SaleDate",
        title: "Sale Time",
        template: "#= kendo.toString(SaleTime, 'g') #"
    }
],

你在这里修改了JSFiddle： http ： //jsfiddle.net/OnaBai/yx7huvxp/10/

Answer 2

Telerik不支持此功能。 参见此处和此处 ，此人使用逻辑日期时间过滤器转换做了出色的服务器端解决方案 。 但是，就我个人而言，我总是觉得去服务器端解决客户端问题很奇怪。

所以最后我通常只将日期和时间部分分成两个不同的列，或者使用datetime而不提供过滤器选项，或者在设计中尽可能避免使用datetime字段。

我也有一个工作的数据源黑客，但...我不建议使用它。 如果你感兴趣的话，这里是......

---

基本上，这个想法是复制数据列，一个是完整日期，另一个是仅日期而没有时间。 然后在列UI上，您希望显示完整日期，但对于基础数据源，您希望使用假日期。 用户始终可以看到完整日期，但过滤器将使用永恒日期。

这是一个演示 。

RandDate是我的完整约会。 RandDate2是我的假部分日期，没有时间。

RandDate: Mon Apr 07 2014 06:15:00 GMT-0400 (Eastern Daylight Time)
RandDate2: Mon Apr 07 2014 00:00:00 GMT-0400 (Eastern Daylight Time)

在我的列定义中，我使用部分日期作为字段，但使用模板显示完整日期

{
    field: "RandDate2", //Set column source to the fake one without time
    title: "Random Date",
    template: "#= kendo.toString(RandDate,'g') #", //display the full date and time
}

Answer 3

我正在使用SharePoint 2010 REST服务作为数据源，这为我完成了工作:(“magic”发生在parameterMap部分）

 $scope.mainGridOptions = { ... dataSource: new kendo.data.DataSource({ type: "odata", transport: { read: { url: $scope.filterParams.url, dataType: "json" }, parameterMap: function (options, type) { if (options && options.filter && options.filter.filters && options.filter.filters.count != 0) { options.filter.filters.forEach(function (f) { if (f.operator && f.operator == 'eq' && f.value && typeof f.value.getMonth == 'function' && typeof f.value.getMonth() == 'number') { f.operator = 'gt'; var newFilter = { field: f.field, operator: 'lt', value: new Date(f.value.getFullYear(), f.value.getMonth(), f.value.getDate(), 23, 59, 59) }; options.filter.filters.push(newFilter); } }) } var params = kendo.data.transports.odata.parameterMap(options, type); delete params.$format; return params; } }, ... } 

它基本上做了什么：如果应用了一些过滤器，检查运算符是否为'eq'（等于），如果值是日期。 由于typeof f.value是一个对象，而f.value instanceof Date始终为true，即使您说了诸如f.value = new Date（'foo'）之类的内容 ，也请检查该值对象是否具有返回值a的函数'getMonth'。数字似乎是合法的，以验证f.value是一个日期。 然后该函数将'eq'运算符更改为'gt'。 （注意f.value的时间是00:00:00！）。 之后它会创建一个带有'lt'运算符的新过滤器，相同的日期但是另一个时间（在我的情况下是23:59:59）并将其推送到filters数组。 由于sharepoint的“ $ format”属性存在一些问题，因此我们将其删除。

所以' date gt 19.10.2015 00:00:00和date lt 19：10：2015 23:59:59 '与' date eq 19.10.2015 '基本相同