jQuery日期和时间段选择代码

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>