将“剑道网格”列显示为“日期时间”,但在筛选时忽略“时间”
Display Kendo Grid column as DateTime but ignore Time when filtering
我有一个剑道网格和一个列"销售时间"显示为MM/dd/yyyy HH:mm a (1/3/2015 2:34 PM)。
现在我希望能够仅按日期过滤,忽略时间。但默认情况下,筛选器正在查看时间,因此我使用"等于"筛选的任何日期都不会返回任何结果。
这是我为说明这个问题而制作的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}" }
]
您可以定义一个schema.parse
函数,该函数生成一个名为 SaleDate
的附加字段,该字段仅包含SaleTime
的Date
部分。
然后,在网格中显示列时,您可以使用它。
像这样:
// 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/
Telerik 不支持开箱即用。看到这里和这里,这家伙使用逻辑日期时间过滤器转换做了一个出色的服务器端解决方案。但是,就我个人而言,我总是觉得去服务器端处理客户端事务很奇怪。
所以最后我通常只是将日期和时间部分分成两个不同的列,或者在不提供过滤器选项的情况下使用日期时间,或者在设计中尽可能避免日期时间字段。
我还有一个有效的数据源黑客,但是...我不建议使用它。如果你有兴趣,这里是...
基本上这个想法是复制数据列,一个是完整日期,另一个只有日期而没有时间。然后在列 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
}
我正在使用SharePoint 2010 REST服务作为数据源,这为我完成了工作:("魔术"发生在参数映射部分)
$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"(等于)以及值是否为日期。由于 F.值的类型是一个对象,并且 Date 的 f.value 实例始终为真,即使您说 f.value = new Date('foo')),检查值对象是否具有返回数字的函数"getMonth"似乎是合法的验证 f.value 是一个日期。然后,该函数将"EQ"运算符更改为"GT"。(请注意,F.Value 的时间是 00:00:00!)。之后,它创建一个带有"lt"运算符的新过滤器,日期相同,但另一个时间(在我的例子中为 23:59:59)并将其推送到 filters 数组。由于 SharePoint 对该"$format"属性存在一些问题,因此我们将其删除。
所以"日期GT 19.10.2015 00:00:00和日期LT 19:10:201523:59:59"与"日期均衡器19.10.2015"基本相同
- 更改angularjs中的日期-时间格式
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- 使用时刻.js从日期时间中提取时间
- 两个日期时间选择器
- Javascript:如何在onChange事件期间更改日期时间值
- .Net webApi ISO日期时间和IE8
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 转换日期时间格式
- 在JavaScript中转换日期/时间格式
- JavaScript JSON关联对象键和值都作为日期时间戳
- 将日期时间javascript绑定到表列
- 将JS日期解析为C#日期时间
- 使用JavaScript将客户端日期/时间字符串转换为JSON日期/时间串
- 从javascript数组获取php的日期时间
- 格式化momentjs日期时间
- 这个正则表达式的日期/时间有什么问题
- Mongoose查询在两个日期时间之间提取数据
- 当转换为Python日期时间时,Node的时间戳落后3分钟
- 自定义angularjs过滤器日期时间格式额外字符