Kendo UI网格-过滤器-日期范围
Kendo UI Grid - Filter - Date Range
按日期范围筛选列与我在SO
中找到的解决方案配合得很好如何在两个日期之间定义剑道网格列过滤器?-由MW-delect 提出
但是
"此解决方案的唯一问题是,如果您只选择结束日期并应用筛选器,下次打开筛选器菜单时,开始日期将填充您输入的结束日期,并选择LTE运营商,jQuery代码将更改该运营商,从而导致错误的筛选器"
ataravati在同一线程中提出的问题
我们如何解决这个问题?
解决方案是为开始日期提供null
值,即使用户尚未选择该值。
但是,我们必须控制提交按钮
function grid_filterMenuInit(e) {
var currentFieldName = e.field;
if(currentFieldName === "yourFieldDate") {
console.info("ignoring this field: <" + currentFieldName + ">");
return;
}
console.info("performing this field: <" + currentFieldName + ">");
var filterSubmit = e.container.find("[type=submit]:eq(0)");
$(filterSubmit).click(function() {
var searchDateAfter = e.container.find("input:eq(0)");
var searchDateAfter1 = $(searchDateAfter).val();
var searchDateBefore = e.container.find("input:eq(1)");
var searchDateBefore1 = $(searchDateBefore).val();
var gridDatasource = $("#yourGridId").data("kendoGrid").dataSource;
var jsDateBefore = null;
var jsDateAfter = null;
// we must convert kendoDateTime to JavaScript DateTime object
// in my case the date time format is : yyyy/MM/dd HH:mm:ss
if (typeof searchDateBefore1 !== 'undefined') {
jsDateBefore = newJsDate(searchDateBefore1);
}
if (typeof searchDateAfter1 !== 'undefined') {
jsDateAfter = newJsDate(searchDateAfter1);
}
var previousFilter = gridDatasource.filter();
var previousFilters = new Array();
var newFilters = new Array();
// storing the previous filters ...
if (typeof previousFilter === 'object' && previousFilter.hasOwnProperty("filters")) {
previousFilters = previousFilter.filters;
for (var i=0 ; i<previousFilters.length ; i++) {
if (previousFilters[i].field !== currentFieldName) {
if (newFilters.length == 0) {
newFilters = [previousFilters[i]];
}
else {
newFilters.push(previousFilters[i]);
}
}
}
}
// this is the soltion : we must provide the first filter, even if the user has not provide the begin date
// and the value will be : null
if (newFilters.length == 0) {
newFilters = [{field: currentFieldName, operator: "gte", value: jsDateAfter }];
}
else {
newFilters.push ({field: currentFieldName, operator: "gte", value: jsDateAfter });
}
if (jsDateBefore !== null) {
newFilters.push ({field: currentFieldName, operator: "lte", value: jsDateBefore });
}
gridDatasource.filter (newFilters);
$(".k-animation-container").hide();
// to stop the propagation of filter submit button
return false;
});
}
function newJsDate(dateTime) {
if (dateTime === null ||
typeof dateTime === 'undefined' ||
dateTime === "") {
return null;
}
var dateTime1 = dateTime.split(" ");
var date = dateTime1[0];
var time = dateTime1[1];
var date1 = date.split("/");
var time1 = time.split(":");
var year = parseInt(date1[0], 10);
var month = parseInt(date1[1], 10);
month = month - 1;
var day = parseInt(date1[2], 10);
var hour = parseInt(time1[0], 10);
var minute = parseInt(time1[1], 10);
var second = parseInt(time1[2], 10);
var jsDate = new Date(year, month, day,
hour, minute, second);
return jsDate;
}
相关文章:
- 正在更新起始日期角度日期范围选择器中的日期选择
- 如何从日期范围选择器中获取两个日期
- 基于日期范围的一组日期范围内的天数
- 过滤日期范围 angularjs 时出错
- 如何在引导日期选取器中限制可选择的日期范围
- 如何在 jQuery 日期选择器 UI 中阻止多个日期范围
- 根据主干集合中的日期范围进行选择
- 关于如何将日期输入值与最小/最大日期范围进行比较的建议
- 查找某个日期范围内的可用天数
- 正在将日期范围选择器转换为角度指令
- 在日期范围内查找丢失日期的最有效方法是什么
- XML查询日期范围查找
- 更改日期范围输入组件的格式
- 24小时格式的日期范围选取器
- jQuery:检索日期选择器日期,检查是否在日期范围内,显示/隐藏字段
- 如何在eonasdan Bootstrap 3 Datepicker上重置链接选取器的日期范围
- 从日期范围滑块访问最小值和最大值
- 什么是JavaScript日期范围
- 正在将日期范围选取器的开始日期设置为空
- RobinHubots jquery.inputmask日期范围