用到layui框架，因此要加载layui.css layui.js
涉及到日期时间区间的滑动，因此要加载swiper.css swiper.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<title>选择日期</title>
<link rel="stylesheet" type="text/css" href="" />
<link rel="stylesheet" type="text/css" href="css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-4.3.5.min.css" />
</head>
<body>
<input type="hidden" value="<?php echo $housing_id ?>" class="housing">
<div class="header-time">
<div class="begin-time">起
<input type="text" id="begin-in" class="timeval" />
</div>
<div class="totaldays"> <span>0</span>天</div>
<div class="end-time">
<input type="text" id="end-in" class="timeval" />终</div>
</div>
<div class="site-demo-laydate bd-datebar">
<div class="layui-inline init-date-fff" id="range-time-box"></div>
<div class="zhanshichajian"></div>
</div>
<div class="layui-form switch-check-control" action="">
<div class="layui-form-item">
<div class="switch-shadow"></div>
<div class="layui-input-block">
<input type="checkbox" name="zzz" lay-skin="switch" lay-skin="switch" lay-filter="switchTest" lay-text="全选|取消">
</div>
</div>
</div>
<div class="swiper-content-bd">
<div class="swiper-hours-main">
<div class="swiper-container">
<div class="swiper-wrapper js-timestr">
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="8">08:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="9">09:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="10">10:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="11">11:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="12">12:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="13">13:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="14">14:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="15">15:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="16">16:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="17">17:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="18">18:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="19">19:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="20">20:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="21">21:00</a>
</div>
<div class="swiper-slide"><a href="javascript:;" class="hourRange-checked-btn" orderSortid="22">22:00</a>
</div>
</div>
</div>
</div>
</div>
<div class="time-range-bd">
<div class="selected-time-range-list">
<h3 class="st-range-hd">已选<em>0</em>时间段(重复时间段可自动删除)<a href="javascript:;" class="more-show-btn">更多</a></h3>
<ul class="range-list-items"></ul>
</div>
</div>
<div class="foot-section">
<div class="footbd"> <a href="javascript:;" class="add-btn">添加</a>
<a href="javascript:;" class="save-btn">保存</a>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/swiper-4.3.5.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
slidesPerView: 6,
paginationClickable: true
})
</script>
<script type="text/javascript">
layui.use(['form', 'laydate'], function() {
var form = layui.form,
laydate = layui.laydate;
var endDateBindymd; //选择日期，年月日
getHasAddedtr();
setTimeout(function() {
initdateplugs();
}, 500)
//获取已添加日期
function getHasAddedtr() {
$.ajax({
type: "post",
url: "",
dataType: 'json',
data: {},
success: function(data) {
if (data['Datesettingslist'].length > 0) {
var timesRangeStr = "";
$.each(data['Datesettingslist'], function(i, n) {
timesRangeStr += '<li checkissaveid="' + n.h_time_id + '" class="ajaxgetdata"><span>' + n.Datesettings + '</span><a href="javascript:;" class="ajaxdelete-btn">取消</a></li>';
});
$(".range-list-items").html(timesRangeStr);
$("#begin-in").val(data['housing_begin']);
$("#end-in").val(data['housing_end']);
$(".st-range-hd em").html($(".range-list-items li").size());
getDays(data['housing_begin'], data['housing_end']);
}
}
})
}
//获得两个日期之间相差的天数
function getDays(date1, date2) {
var date1Str = date1.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
//根据年 . 月 . 日的值创建Date对象
var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
var date2Str = date2.split("-");
var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
var t1 = date1Obj.getTime();
var t2 = date2Obj.getTime();
var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
var minusDays = Math.floor(((t2 - t1) / dateTime)); //计算出两个日期的天数差
var days = Math.abs(minusDays) + 1; //取绝对值
if (days > 180) {
$(".switch-shadow").show();
layer.msg("时间天数最长为180天,请重新选择");
$("#end-in").val("");
return false;
} else {
$(".switch-shadow").hide();
}
$(".totaldays span").html(days);
}
//已添加日期后，初始化可选择日期
function initdateplugs() {
var val = $("#begin-in").val();
var val2 = $("#end-in").val();
if (val && val2) {
$(".bd-datebar .layui-laydate").remove();
$(".zhanshichajian").remove();
laydate.render({
elem: '.init-date-fff',
min: val,
max: val2,
showBottom: false,
ready: function(value, date) {
endDateBindymd = $(".layui-this").attr("lay-ymd");
var ymdarr = endDateBindymd.split('-');
if (ymdarr[1] < 10) {
var ymdarrMonth = '0' + ymdarr[1];
} else {
ymdarrMonth = ymdarr[1];
}
if (ymdarr[2] < 10) {
var ymdarrDay = '0' + ymdarr[2];
} else {
ymdarrDay = ymdarr[2];
}
var ymdarrstr = ymdarr[0] + '-' + ymdarrMonth + '-' + ymdarrDay;
console.log(ymdarrstr);
endDateBindymd = ymdarrstr
},
change: function(value, date, endDate) {
console.log(dateToStrend(date));
if ($(".layui-form-switch").hasClass("all-checked-active")) {
setTimeout(function() {
addlayuithisClassname();
}, 100)
} else {
var $dateplugstdcontrol = $(".bd-datebar table tbody tr td");
$dateplugstdcontrol.each(function() {
if (dateToStrend(date) == $(this).attr("lay-ymd")) {
$(this).addClass("layui-this");
}
})
}
},
done: function(value, date) {
endDateBindymd = dateToStrend(date);
},
position: 'static'
});
} else {}
}
//限定可选日期
//限定可选日期
function dateToStr(date) {
day = date.date;
var month = date.month;
if (month < 10) {
month = '0' + month;
} else {
month = date.month;
}
if (day < 10) {
day = '0' + day;
} else {
day = day;
}
return date.year + '-' + month + '-' + day;
}
function dateToStrend(date) {
day = date.date;
var month = date.month;
if (month < 10) {
month = '0' + month;
} else {
month = date.month;
}
if (day < 10) {
day = '0' + day;
} else {
day = day;
}
return date.year + '-' + month + '-' + day;
}
//页面打开，未选择开始结束日期，展示日期
laydate.render({
elem: ".zhanshichajian",
position: 'static',
showBottom: false
})
//选择开始日期，结束日期，显示可选日期段
layui.use(['laydate'], function() {
var laydate = layui.laydate;
var val2;
laydate.render({
elem: '#begin-in',
showBottom: false,
min: 'layuidate.now()',
done: function(value, date) {
var val = dateToStr(date);
if (val2) {
$("#range-time-box").removeClass("init-date-fff").addClass("db-date-plugs");
$(".bd-datebar .layui-laydate").remove();
$(".zhanshichajian").remove();
getDays(val, val2);
laydate.render({
elem: '#range-time-box',
min: val,
max: val2,
showBottom: false,
ready: function() {},
change: function(value, date, endDate) {
console.log(dateToStrend(date));
if ($(".layui-form-switch").hasClass("all-checked-active")) {
setTimeout(function() {
addlayuithisClassname();
}, 100)
} else {
var $dateplugstdcontrol = $(".bd-datebar table tbody tr td");
$dateplugstdcontrol.each(function() {
if (dateToStrend(date) == $(this).attr("lay-ymd")) {
$(this).addClass("layui-this");
}
})
}
},
done: function(value, date) {
endDateBindymd = dateToStrend(date);
console.log(endDateBindymd);
},
position: 'static'
});
} else {
laydate.render({
elem: '#end-in',
showBottom: false,
min: val,
done: function(value, date) {
$("#range-time-box").removeClass("init-date-fff").addClass("db-date-plugs");
$(".bd-datebar .layui-laydate").remove();
$(".zhanshichajian").remove();
//直接嵌套显示
val2 = dateToStrend(date);
getDays(val, val2);
laydate.render({
elem: '#range-time-box',
min: val,
max: val2,
showBottom: false,
ready: function() {},
change: function(value, date, endDate) {
console.log(dateToStrend(date));
if ($(".layui-form-switch").hasClass("all-checked-active")) {
setTimeout(function() {
addlayuithisClassname();
}, 100)
} else {
var $dateplugstdcontrol = $(".bd-datebar table tbody tr td");
$dateplugstdcontrol.each(function() {
if (dateToStrend(date) == $(this).attr("lay-ymd")) {
$(this).addClass("layui-this");
}
})
}
},
done: function(value, date) {
endDateBindymd = dateToStrend(date);
// console.log(endDateBindymd);
},
position: 'static'
});
}
});
}
}
});
});
//监听指定开关
form.on('switch(switchTest)', function(data) {
if (this.checked == true) {
$(".layui-form-switch").addClass("all-checked-active");
//全选
addlayuithisClassname()
} else {
$(".layui-form-switch").removeClass("all-checked-active");
var $tcj = $(".bd-datebar td");
$tcj.each(function() {
if ($(this).hasClass("layui-this")) {
$(this).removeClass("layui-this");
} else {}
})
}
});
//全选
function addlayuithisClassname() {
var $dateplugstd = $(".bd-datebar table tbody tr td");
var topbegindate = $("#begin-in").val();
$dateplugstd.each(function() {
// var layymd = $(this).attr("lay-ymd");
if ($(this).hasClass("laydate-disabled")) {} else {
$(this).addClass("layui-this");
}
})
}
//选择时间段
$(".hourRange-checked-btn").click(function() {
var $onClassName = $(".active_time");
var onlen = $onClassName.length;
var $endon = $(".active_time_end");
var endonlen = $endon.length;
if ($(this).hasClass("active_time")) {
// $(this).removeClass().addClass("hourRange-checked-btn");
$(this).attr('class', 'hourRange-checked-btn');
} else {
//已经选2个时间
if (onlen == 2) {
layer.msg("最多选俩个时间");
return false;
} else if (onlen == 0) {
$(this).addClass("active_time_begin").addClass("active_time");
} else {
if (endonlen == 1) {
$(this).addClass("active_time_begin").addClass("active_time");
} else {
$(this).addClass("active_time_end").addClass("active_time");
}
}
}
})
//添加已选中日期和时间
$(".add-btn").click(function() {
var $dateSel = $(".bd-datebar .layui-laydate-content td.layui-this");
var dateSellen = $dateSel.length;
//
if (dateSellen == 1) {
var osid_first = parseInt($(".active_time_begin").attr("orderSortid"));
var osid_second = parseInt($(".active_time_end").attr("orderSortid"));
var hourRangeStr = '';
var beginingtime;
var endingtime;
if (osid_first < osid_second) {
hourRangeStr = $(".active_time_begin").text() + '-' + $(".active_time_end").text();
beginingtime = $(".active_time_begin").text();
endingtime = $(".active_time_end").text();
} else {
hourRangeStr = $(".active_time_end").text() + '-' + $(".active_time_begin").text();
beginingtime = $(".active_time_end").text();
endingtime = $(".active_time_begin").text();
}
if (endDateBindymd == undefined) {
layer.msg("请选择日期和时间");
return false;
}
var endSaveDateStr = endDateBindymd + ' ' + hourRangeStr;
if ($(".active_time_begin").text() == '' || $(".active_time_end").text() == '' || endDateBindymd == '') {
layer.msg("请先选择日期和时间");
return false;
}
var checkbegintime = endDateBindymd + ' ' + beginingtime;
var checkendtime = endDateBindymd + ' ' + endingtime;
//判断添加的日期是否存在
var $hasCheckedTimeRange = $(".range-list-items li");
var hasCheckrtlen = $hasCheckedTimeRange.length;
var hasChecktrArr = [];
if (hasCheckrtlen > 0) {
$hasCheckedTimeRange.each(function() {
hasChecktrArr.push($(this).attr("checkissaveid"));
})
if (isInArray(hasChecktrArr, endDateBindymd) == true) {
layer.msg("请勿重复添加");
return false;
} else {
var pj_listr = '<li checkissaveid="' + endDateBindymd + '" checkpostymd="' + endDateBindymd + '" checkpostymdbt="' + checkbegintime + '" checkpostymdet="' + checkendtime + '"><span>' + endSaveDateStr + '</span><a href="javascript:;" class="jsnodelete-btn">取消</a></li>';
$(".range-list-items").append(pj_listr);
$(".st-range-hd em").html($(".range-list-items li").size());
}
} else {
var pj_listr = '<li checkissaveid="' + endDateBindymd + '" checkpostymd="' + endDateBindymd + '" checkpostymdbt="' + checkbegintime + '" checkpostymdet="' + checkendtime + '"><span>' + endSaveDateStr + '</span><a href="javascript:;" class="jsnodelete-btn">取消</a></li>';
$(".range-list-items").append(pj_listr);
$(".st-range-hd em").html($(".range-list-items li").size());
}
} else {
//判断添加的日期是否存在
var $hasCheckedTimeRange = $(".range-list-items li");
var hasCheckrtlen = $hasCheckedTimeRange.length;
var hasChecktrArr = [];
if (hasCheckrtlen > 0) {
$hasCheckedTimeRange.each(function() {
hasChecktrArr.push($(this).attr("checkissaveid"));
})
if (isInArray(hasChecktrArr, endDateBindymd) == true) {
layer.msg("请勿重复添加");
return false;
} else {
getAll($("#begin-in").val(), $("#end-in").val());
$(".st-range-hd em").html($(".range-list-items li").size());
}
} else {
getAll($("#begin-in").val(), $("#end-in").val());
$(".st-range-hd em").html($(".range-list-items li").size());
}
}
})
//遍历开始日期到结束日期
Date.prototype.format = function() {
var s = '';
s += this.getFullYear() + '-'; // 获取年份。
if ((this.getMonth() + 1) < 10) {
s += '0' + (this.getMonth() + 1) + "-";
} else {
s += (this.getMonth() + 1) + "-"; // 获取月份。
}
if (this.getDate() < 10) {
s += '0' + this.getDate();
} else {
s += this.getDate(); // 获取日。
}
return (s); // 返回日期。
};
function getAll(begin, end) {
var ab = begin.split("-");
var ae = end.split("-");
var db = new Date();
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
var de = new Date();
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
var unixDb = db.getTime();
var unixDe = de.getTime();
var allselectstr = '';
allselectstr += "<li checkissaveid=" + $("#begin-in").val() + "><span>" + $("#begin-in").val() + ' 08:00-22:00' + "</span><a class="jsnodelete-btn">取消</a></li>";
for (var k = unixDb + 24 * 60 * 60 * 1000; k < unixDe;) {
allselectstr += "<li checkissaveid=" + (new Date(parseInt(k))).format() + "><span>" + (new Date(parseInt(k))).format() + ' 08:00-22:00' + "</span><a class="jsnodelete-btn">取消</a></li>";
console.log((new Date(parseInt(k))).format() + ' 08:00-22:00');
k = k + 24 * 60 * 60 * 1000;
}
allselectstr += "<li checkissaveid=" + $("#end-in").val() + "><span>" + $("#end-in").val() + ' 08:00-22:00' + "</span><a class="jsnodelete-btn">取消</a></li>";
$(".range-list-items").html(allselectstr);
}
//判断数组中是否存在某元素
function isInArray(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
}
return false;
}
//点击取消
$(document).on("click", ".jsnodelete-btn", function() {
$(this).parent("li").remove();
$(".st-range-hd em").html($(".range-list-items li").size());
})
//取消已保存日期
$(document).on("click", ".ajaxdelete-btn", function() {
var _this = $(this).parent("li");
var deleteid = $(this).parent("li").attr("checkissaveid");
$.ajax({
type: "post",
url: "",
dataType: 'json',
data: {},
success: function(data) {
if (data == 1) {
layer.msg("取消成功");
_this.remove();
} else {
layer.msg("取消失败");
}
}
});
})
//点击保存
$(".save-btn").click(function() {
var savepostarr = [];
var $savehasstr = $(".range-list-items li");
var savehasstrlen = $savehasstr.length;
$savehasstr.each(function() {
if ($(this).hasClass("ajaxgetdata")) {} else {
savepostarr.push($(this).children("span").text());
}
})
savepostarr = savepostarr.join(",");
console.log(savepostarr);
// return false;
$.ajax({
type: "post",
url: "",
dataType: 'json',
data: {},
success: function(data) {
if (data) {
console.log(data);
layer.msg("保存成功");
// window.location.href="";
} else {
layer.msg("保存失败,请稍候再试");
return false;
}
},
error: function() {
console.log("服务器请求失败，请稍候再试");
}
});
})
})
</script>