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

備注：

最后兩個方法使用了對象進行了一次包裹，具體原因忘記了，因為直接傳遞時間字符串是有問題的，可能是由於值傳遞和引用傳遞的問題。