简单实用的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791