首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 日期时间 > jQuery日期和时间段选择代码

jQuery日期和时间段选择代码

更新时间:2019-12-03 码币:1
357058607
jQuery日期和时间段选择代码 应用简介

简单实用的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>


  • 收藏
  • 投诉
评论列表