Kendo ui 是否有任何解决方案匹配剑道日期选择器值和网格日期列值
我有一个要求,需要选择to和from date,以便日期在网格中匹配并显示结果。但是带有date的网格列包含日期+时间。因此我的问题是,是否可以忽略to和from日期选择器中的时间和只读日期,并匹配网格中的值Kendo ui 是否有任何解决方案匹配剑道日期选择器值和网格日期列值,kendo-ui,Kendo Ui,我有一个要求,需要选择to和from date,以便日期在网格中匹配并显示结果。但是带有date的网格列包含日期+时间。因此我的问题是,是否可以忽略to和from日期选择器中的时间和只读日期,并匹配网格中的值 $("#datepicker").kendoDatePicker({ dateFormat: "dd-mm-yy", format : "dd-MM-yy "}); $("#datepicker1").kendoDatePicker({ dateFormat:
$("#datepicker").kendoDatePicker({
dateFormat: "dd-mm-yy",
format : "dd-MM-yy "});
$("#datepicker1").kendoDatePicker({
dateFormat: "dd-mm-yy",
format : "dd-MM-yy "});
var result=$("#grid").kendoGrid({
filterable: true,
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "dob", title: "DOB" , format: "{0:dd-MM-yy HH:mm:ss}"}
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" ,dob:"2013-02-18 19:54:13"},
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-02-18 20:55:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-05-30 21:56:15" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-05-18 22:57:16" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-02-19 20:55:20" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-02-24 20:56:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-03-26 20:57:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-02-28 20:42:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-03-22 11:55:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-03-27 20:55:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-04-18 20:55:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-04-23 20:55:14" },
{ FirstName: "Jane", LastName: "Smith" ,dob:"2013-04-24 20:55:14" }
],
schema: {
data: function (data) {
$.each(data, function (i, val) {
val.dob = kendo.parseDate(val.dob, "yyyy-MM-dd HH:mm:ss");
});
return data;
}
}
}
}).data("kendoGrid");
$("#datepicker, #datepicker1").on("change", function (){
var mindate = $('#datepicker').data("kendoDatePicker").value();
var maxdate = $('#datepicker1').data("kendoDatePicker").value();
var condition = {
logic : "and",
filters: [
]
};
if (mindate !== null) {
condition.filters.push({ field: "dob", operator: "ge", value: mindate });
}
if (maxdate !== null) {
condition.filters.push({ field: "dob", operator: "le", value: maxdate });
}
result.dataSource.filter(condition);
});
这里是fiddle I更新版定义一个附加列,其中包含日期而非时间,并使用此列进行筛选 这可以在
数据
功能中完成:
data: function (data) {
$.each(data, function (i, val) {
val.dob2 = kendo.parseDate(val.dob, "yyyy-MM-dd");
val.dob = kendo.parseDate(val.dob, "yyyy-MM-dd HH:mm:ss");
});
return data;
}
以及过滤部分:
$("#datepicker, #datepicker1").on("change", function (){
var mindate = $('#datepicker').data("kendoDatePicker").value();
var maxdate = $('#datepicker1').data("kendoDatePicker").value();
var condition = {
logic : "and",
filters: [
]
};
if (mindate !== null) {
condition.filters.push({ field: "dob2", operator: "ge", value: mindate });
}
if (maxdate !== null) {
condition.filters.push({ field: "dob2", operator: "le", value: maxdate });
}
result.dataSource.filter(condition);
});
第二个选项是将过滤条件定义为:
if (mindate !== null) {
condition.filters.push({ field: "dob", operator: "ge", value: new Date(mindate) });
}
if (maxdate !== null) {
condition.filters.push({ field: "dob", operator: "le", value: new Date(maxdate) });
}
其中我们添加了一个新日期(…),用于向日期添加时间
注意:这在您进行客户端筛选时有效。如果您正在进行服务器端筛选,则应轻松更改服务器中的查询以处理此问题。意味着在获取数据之前,应对其进行解析。第二种解决方案不需要更改解析函数,只需更改
change
event的事件处理程序即可。在这里查看:谢谢OnaBai,但我遇到的问题是,如果我输入到:18-02-13和from:18-02-13,则该值不会被过滤,如果我输入30-05-13,则在输入第二个日期之前会被过滤。是否有其他选项OnaBai,如果我输入的日期为30-05-13 21:56:15,则会被过滤,它没有考虑到日期。从那以后,我从日期得到的一个点应该小于到日期,如果我输入18-02-13和30-05-13,它们之间的日期将被过滤