EasyUI datebox限制时间选择范围
datebox限制时间选择
对datebox可选择日期进行限制,目前感觉使用起来效果很好,不可选择的日期置灰不可点击
1. 限制开始时间小于结束时间
//using
limitStartDateAndEndDate($("#DateStart"), $("#DateEnd"));
/**
* 限制开始时间小于结束时间
* @param {开始时间对象} startDateObj
* @param {结束时间对象} endDateObj
* @returns {}
*/
function limitStartDateAndEndDate(startDateObj,endDateObj) {
startDateObj.next().click(function () {
if (endDateObj.datebox("getValue") !== "") {
startDateObj.datebox("calendar").calendar({
validator: function (date) {
var dateEnd = endDateObj.datebox("getValue");
var dateTimeEnd = new Date(dateEnd);
var validateTime = new Date(dateTimeEnd.getFullYear(), dateTimeEnd.getMonth(), dateTimeEnd.getDate());
return date <= validateTime;
}
});
} else {
startDateObj.datebox("calendar").calendar({
validator: function (date) {
return date;
}
});
}
});
endDateObj.next().click(function () {
if (startDateObj.datebox("getValue") !== "") {
endDateObj.datebox("calendar").calendar({
validator: function (date) {
var dateStart = startDateObj.datebox("getValue");
var dateTimeStart = new Date(dateStart);
var validateTime = new Date(dateTimeStart.getFullYear(), dateTimeStart.getMonth(), dateTimeStart.getDate());
return date >= validateTime;
}
});
} else {
endDateObj.datebox("calendar").calendar({
validator: function (date) {
return date;
}
});
}
});
}
2. 限制开始时间小于指定时间
/**
* 限制开始时间小于指定时间
* 限制时间为containLimitStartDateObj.limitEndDate
* @param {开始时间对象} startDateObj
* @param {包含限制时间的对象} containLimitEndDateObj
* @returns {}
*/
function limitStartDateBeforeDate(startDateObj, containLimitEndDateObj) {
startDateObj.next().click(function () {
if (containLimitEndDateObj.limitEndDate !== "") {
startDateObj.datebox("calendar").calendar({
validator: function (date) {
var dateTimeEnd = new Date(containLimitEndDateObj.limitEndDate);
var validateTime = new Date(dateTimeEnd.getFullYear(), dateTimeEnd.getMonth(), dateTimeEnd.getDate());
return date <= validateTime;
}
});
} else {
startDateObj.datebox("calendar").calendar({
validator: function (date) {
return date;
}
});
}
});
}
3. 限制结束时间大于指定时间
/**
* 限制结束时间大于指定时间
* 限制时间为containLimitStartDateObj.limitStartDate
* @param {包含限制时间的对象} containLimitStartDateObj
* @param {结束时间对象} endDateObj
* @returns {}
*/
function limitEndDateAfterDate(containLimitStartDateObj, endDateObj) {
endDateObj.next().click(function () {
if (containLimitStartDateObj.limitStartDate !== "") {
endDateObj.datebox("calendar").calendar({
validator: function (date) {
var dateTimeStart = new Date(containLimitStartDateObj.limitStartDate);
var validateTime = new Date(dateTimeStart.getFullYear(), dateTimeStart.getMonth(), dateTimeStart.getDate());
return date >= validateTime;
}
});
} else {
endDateObj.datebox("calendar").calendar({
validator: function (date) {
return date;
}
});
}
});
}
备注:
最后两个方法使用了对象进行了一次包裹,具体原因忘记了,因为直接传递时间字符串是有问题的,可能是由于值传递和引用传递的问题。