easyui datebox 开始/结束时间 动态互相限制

前端  /  管理员 发布于 5年前   816

easyui这个就不多说了，两种方式；话不多说直接上代码；

前端代码：

开始：
<input id="start" type="text" name="startdate" class="easyui-datebox">
结束：
<input id="end" type="text" name="enddate" class="easyui-datebox">

js代码：

1.动态限制结束时间
    //##时间限制 start ##//
    //开始日期选择时触发
    $('#<?php echo NS;?>start').datebox({
        onSelect : function(){
            //启用结束日期控件
            $('#<?php echo NS; ?>end').datebox('enable');
            setTimeout(function () {
                var start = $('#<?php echo NS; ?>start').datebox('getValue');
                var end = $('#<?php echo NS; ?>end').datebox('getValue');
                //开始日期大于结束日期 重置结束日期
                if (start > end) {
                    $('#<?php echo NS; ?>end').datebox('reset');
                }
            },200);
        }
    });
    $(function(){
        //开始日期选今天之前
        $('#<?php echo NS; ?>start').datebox().datebox('calendar').calendar({
            validator: function(date){
                var now = new Date();
                var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                return d1>=date;
            }
        });
        //选择开始日期之后
        $('#<?php echo NS; ?>end').datebox().datebox('calendar').calendar({
            validator: function(date){
                var now = new Date();
                var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                var d2 = $('#<?php echo NS; ?>start').datebox('getValue');
                var d2 = new Date(Date.parse(d2.replace(/-/g,"/")));
                return d1<=date || date>=d2;
            }
        });
    });
    //##时间限制 end ##//
2.动态互相限制
    //##时间限制 start ##//
    $(function() {
        //开始日期选结束日期之前
        $('#<?php echo NS; ?>start').datebox(
            {
                onShowPanel: function () {
                    $(this)
                        .datebox('calendar')
                        .calendar({
                            validator: function (date) {
                                var end = $('#<?php echo NS; ?>end').datebox('getValue');
                                if (end) {
                                    end = new Date(Date.parse(end.replace(/-/g, "/")));
                                } else {
                                    end = new Date();
                                }
                                return date <= end;
                            }
                        })
                }
            });
        //结束日期选开始日期之后
        $('#<?php echo NS; ?>end').datebox(
            {
                onShowPanel: function () {
                    $(this)
                        .datebox('calendar')
                        .calendar({
                            validator: function (date) {
                                var start = $('#<?php echo NS; ?>start').datebox('getValue');
                                if (start) {
                                    start = new Date(Date.parse(start.replace(/-/g, "/")));
                                } else {
                                    start = new Date();
                                }
                                return date >= start;
                            }
                        })
                }
            });
    })
    //##时间限制 end ##//

效果就不截图了 有兴趣的自己测试哦