EasyUI限制时间选择(开始时间小于结束时间)

Posted 2020-12-15 halfsaltedfish

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;
                }
            });
        }
    });
}

备注：

最后两个方法使用了对象进行了一次包裹，具体原因忘记了，因为直接传递时间字符串是有问题的，可能是由于值传递和引用传递的问题。