E_T

导航

Easyui datebox 限制时间选择范围

Posted on 2016-03-12 11:13  E_T  阅读(1448)  评论(0编辑  收藏  举报


Require Date:
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style="width: 110px" id="StartTime"> To       : <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style="width: 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));
        }
    });
}