easyui datebox设置日期范围,其他不可选

  easyui datebox没有同my97日历控件配置限制可以选择日期的范围,easyui要限制日期选择,需要自己扩展功能。

  easyui datebox参考其他控件值设置范围可以参考此文:easyui datebox范围设置日期对比参考

  easyui datebox设置日期范围,其他不可选源代码如下,easyui测试版本为1.3.3,1.4,1.4.1,1.4.3,1.4.4,其他版本没效果可以最后留言,效果如下

easyui datebox设置日期范围,其他不可选

<title>easyui datebox设置日期范围,其他不可选</title>
日期1:<input class="easyui-datebox" data-options="minDate:'2017/8/3',maxDate:'2017/8/17'">(2017/8/3~2017/8/17)<br /><br />
日期2:<input class="easyui-datebox" data-options="minDate:'2017/8/9',maxDate:'2017/8/26'">(2017/8/3~2017/8/26)<br /><br />
日期3:<input class="easyui-datebox">(不限制范围)<br />
<style>td.disabled{cursor:not-allowed;text-decoration:line-through;background:#ccc;color:#f00}</style>
<script>
    $(function () {
        //如果通过class="easyui-datebox"标记组件,setCalendarState要在dom ready中执行。
        //如果非同过class标记组件,js初始化组件,则可以$('#xxxx').datebox({minDate:'',maxDate:''...其他配置..}).setCalendarState()调用即可。
        //注意minDate,maxDate格式为 年-月-日 或者 年/月/日 格式及符合Date参数的字符串,其他可能报错或者无法正常限制范围
        $('input.easyui-datebox').setCalendarState();
    });
    //power by Showbo(http://www.w3dev.cn/),keep this to fixed bug or update
    $.fn.setCalendarState = function () {
        function setCalendarTds() {
            var el=$(this),opt = el.datebox('options');
            if (opt.minDate || opt.maxDate) {
                if (typeof opt.minDate == 'string') opt.minDate = new Date(opt.minDate.replace(/-/g,'/')).getTime();
                if (typeof opt.maxDate == 'string') opt.maxDate = new Date(opt.maxDate.replace(/-/g, '/')).getTime();
                var panel = el.datebox('panel');
                var tds = panel.find('td.calendar-day');
                var ok, d,td
                tds.each(function () {
                    td = $(this);
                    d = new Date(td.attr('abbr').replace(/,/g, '/')).getTime();
                    ok = true;
                    if (opt.minDate && d < opt.minDate) ok = false;
                    if (ok && opt.maxDate && d > opt.maxDate) ok = false;
                    if (!ok) td.addClass('disabled').unbind('click').click(function (e) { e.stopPropagation() });
                });
                var today = panel.find('div.datebox-button a:first');
                ok = true;
                d = new Date(); d = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()).getTime();
                if (opt.minDate && d < opt.minDate) ok = false;
                if (ok && opt.maxDate && d > opt.maxDate) ok = false;
                if (!ok) today.parent().addClass('disabled').click(function (e) { e.stopPropagation() });
            }
        }
        return this.each(function () {
            var el = $(this), opt = el.datebox('options');
            if (!opt.minDate && !opt.maxDate) return;//不限制日期推出
            var cOpts = el.datebox('calendar').calendar('options');
            //easyui1.4.1新增的私有事件onNavigate,API未公布,源代码有
            if (cOpts.onNavigate) cOpts.onNavigate = function () { setCalendarTds.call(el) }
            else {//easyui 1.4-需要直接操作dom对象,懒得改源代码了
                var panel = el.datebox('panel');
                //触发点击事件显示年月层,要不初始化不显示的,无法给月份绑定点击事件
                panel.datebox('panel').find('div.calendar-title span').trigger('click');
                panel.find('div.calendar-menu').hide();//隐藏年月层,要不1.3.x版本会显示,有重影
                //给年月层的月份,切换月份和年份的前后按钮绑定一个新click事件,用于日期检查
                panel.find('td.calendar-menu-month').add(panel.find('div.calendar-nav')).click(function () { setCalendarTds.call(el) })
            }
        });
    }
</script>

 


原创文章,转载请注明出处:easyui datebox设置日期范围,其他不可选

评论(0)Web开发网
阅读(541)喜欢(0)easyui开发技巧