zoukankan      html  css  js  c++  java
  • EasyUI限制时间选择(开始时间小于结束时间)

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

    备注:

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

  • 相关阅读:
    海量数据与布隆过滤
    Flink History Job
    golang and intellij
    maven中如何得到父工程的位置
    maven中进行go的编译
    hbase表的写入
    Storm之tickTuple
    storm-kafka版本不匹配的问题
    (17)zabbix自定义用户key与参数User parameters
    (16)zabbix history trends历史与趋势数据详解
  • 原文地址:https://www.cnblogs.com/halfsaltedfish/p/13232136.html
Copyright © 2011-2022 走看看