• Easyui datebox 限制时间选择范围




    Require Date:
    <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style=" 110px" id="StartTime"> To       : <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style=" 110px" id="EndTime">

    $(function () {

    bindDateBlur($("#StartTime"));
    bindDateBlur($("#EndTime"));

    //控件的初始限制
            $('#EndTime').datebox().datebox('calendar').calendar({
                validator: function (endDate) {
                    return endDate <= new Date();
                }
            });
            $('#StartTime').datebox().datebox('calendar').calendar({
                validator: function (startDate) {
                    return startDate <= new Date();
                }
            });
    })
    
    
    
     
    //easyui官方重写时间格式的方法
    function myformatter(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
    }
    function myparser(s) {
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[0], 10);
        var m = parseInt(ss[1], 10);
        var d = parseInt(ss[2], 10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
            return new Date(y, m - 1, d);
        } else {
            return new Date();
        }
    }
    
    //当选择开始日期时限定结束日期的范围
    function selectStartDate(startDate) {
        //返回calendar会清空EndTime内容,需要保存下
        var tempEndDate = $('#EndTime').datebox('getValue')
        $('#EndTime').datebox().datebox('calendar').calendar({
            validator: function (endDate) {
                //限定日期选择范围
                return endDate >= startDate && endDate <= new Date();
            }
        });
        //将EndTime写回去
        $('#EndTime').datebox('setValue', tempEndDate);
    }
    //当选择结束日期时限定开始日期的范围
    function selectEndDate(endDate) {
        var tempStartDate = $('#StartTime').datebox('getValue');
        $('#StartTime').datebox().datebox('calendar').calendar({
            validator: function (startDate) {
                return startDate <= endDate && startDate <= new Date();
            }
        });
        $('#StartTime').datebox('setValue', tempStartDate);
    }
    //datebox的绑定事件
    function bindDateBlur(st) {
    
        st.datebox('textbox').bind('blur', function () {
            var s = st.textbox('getText');
            if (!s) return new Date();
            var nt = s.replace(///g, '-');
            s = (nt.split('-'));
            var a = parseInt(s[0], 10);
            var b = parseInt(s[1], 10);
            var c = parseInt(s[2], 10);
            var date = new Date();
            if (!isNaN(a) && !isNaN(b) && !isNaN(c)) {
                st.datebox('setValue', nt);
            } else if (!isNaN(a) && !isNaN(b)) {
                var y = date.getFullYear();
                st.datebox('setValue', y + '-' + a + '-' + b);
            } else {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                st.datebox('setValue', y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d));
            }
        });
    }
  • 相关阅读:
    react 样式继承 属性传递
    react css-in-js
    react 利用高阶组件给页面加上动画
    react路由过渡动画效果
    REACT列表过度
    react 过渡动画组件
    VueJs之计算属性
    VueJs之判断与循环
    VusJs之入门
    MYSQL之数据报表
  • 原文地址:https://www.cnblogs.com/Celebrator/p/5268180.html
Copyright © 2020-2023  润新知