jQuery日期和时间段选择代码

来源:http://www.phprr.com/show-1610 2019-12-03 21:30:42浏览() 收藏

简单实用的jQuery日期和时间段选择代码,可选择预约日期以及预约时段区间范围。
jQuery日期和时间段选择代码
查看演示

手机扫码访问:

下载资源: 0
下载资源 下载积分: 50 积分

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>


友情提醒:源码仅供学习 不得用于其他用途,下载者用于违法用途,本站不承担任何责任

腾讯云服务器安全可靠高性能,多种配置供您选择

https://cloud.tencent.com/redirect.php?redirect=1001&cps_key=b685b398d3e704662203733b89accc52&from=console

阿里云服务器安全可靠高性能,多种配置供您选择

https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=geqqrf2n

最新交易
评论0
头像

评论后赠送5积分,下载出错或者资源有问题请联系全栈客服QQ 357058607

1 2