jQuery日期和时间段选择代码

来源:https://www.sucaihuo.com/js/4978.html 2019-12-02 12:10浏览(115) 收藏

简单实用的jQuery日期和时间段选择代码,可选择预约日期以及预约时段区间范围。
jQuery日期和时间段选择代码
分类:日期时间 > 年月时间段 难易:初级
查看演示 下载资源: 7

手机扫码访问:

下载资源 下载积分: 30 积分

js代码

<script src="js/jquery.min.js"></script>
<script>
    var box1,box2;
    $('.date_').click(function() {
        $('.date_').removeClass('checked');
        $(this).addClass('checked');
    });

    $(".slot_").on("click", function () {
        var $this = $(this);
        var $boxes = $this.parent().children();

        if ($this.hasClass('disable'))
            return;

        if (!box1) {
            // 点击第一个盒子的时候清空所有box的checked状态
            // 移除之前存储的box2变量
            // 只给当前盒子增加checked
            box1 = $this;
            $boxes.removeClass('checked');
            $this.addClass('checked');
            box2 = null;
        } else if (!box2) {
            // 点击第二个盒子的时候
            // 计算从哪个盒子开始到哪个盒子结束需要增加checked状态
            box2 = $this;
            var box1Index = box1.index();
            var box2Index = box2.index();

            // 这里从“第一个盒子”、“第二个盒子”的概念切换到“开始盒子”和“结束盒子”
            var startBoxIndex = Math.min(box1Index, box2Index);
            var endBoxIndex = Math.max(box1Index, box2Index);

            // 重复点击第一个盒子时,不计算为第二个盒子
            if (startBoxIndex === endBoxIndex) {
                box2 = null;
            }

            // 开始盒子和结束盒子之间所有的盒子
            var $startEndBoxRange = $boxes.filter(function () {
                var index = $(this).index();
                return index >= startBoxIndex && index <= endBoxIndex;
            });
            var $disableBoxes = $startEndBoxRange.filter(function () {
                return $(this).hasClass('disable');
            });

            // 用户选择的区间是否包含禁用的盒子
            if ($disableBoxes.length) {
                // 包含禁用盒子则提示,并重置第二盒子
                alert('在范围内禁用');
                box2 = null;
            } else {
                // 不包含禁用盒子
                $boxes.removeClass('checked');
                $startEndBoxRange.addClass('checked');

                // 到这里用户选择完了开始和结束区间
            }
        } else {
            // 当已经选择了第二个盒子后重新点击,意味着刚才选过的一系列盒子作废
            // 用户期望重新选择盒子区间
            // 和选择第一个盒子后的逻辑相同
            box1 = $this;
            $boxes.removeClass('checked');
            $this.addClass('checked');
            box2 = null;
        }

    })

    $("#submitOrder").on('click',function(){
        if(box1 && box2){
            var startTime = box1.attr("data-time");
            var endTime = box2.attr("data-time");
            if(startTime && endTime){
                alert("预约成功")
            }else{
                alert("请选择预约时间")
            }
        }else{
            alert("请选择两个时间点")
        }



    })

</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2