移动端仿美团酒店预订选择日期日历

最新推荐文章于 2024-08-08 23:04:40 发布

南山小舍

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量1.2k

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_36106791/article/details/107160142

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现移动端仿美团酒店预订的日期选择日历组件，包括HTML结构、样式设计及JavaScript交互逻辑，最后展示了效果演示。

摘要由CSDN通过智能技术生成

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery手机端仿美团酒店预订日期选择插件</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/calendar.css" />
<style type="text/css">
	.Date_lr{
   width:50%;text-align:center;}
	.span21{
   
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		font-size:14px;
		color: #666;
		border: 1px solid #e5e5e5;
		padding:2px 8px;
		line-height: 20px;
		border-radius: .2rem;
		background-color: #fff;
	}
	#checkinout{
   
		height: 50px;
		line-height: 50px;
		position: relative;
		margin: 10px;
		padding: 2px 0;
		display: -webkit-box;
		display: flex;
		border: 1px solid #e5e5e5;
		border-radius: .02rem;
		background-color: #fff;
	}
	#firstSelect p{
   line-height:25px;color: #999;font-size:12px;}
	#startDate{
   border:0;position: absolute;left: 0;margin: 0 auto;width: 50%;font-size: 16px;color: #05c0ad;text-align: center;}
	#endDate{
   border:0;position: absolute;right: 0;margin:auto 0;width:50%;font-size: 16px;color: #05c0ad;text-align: center;}
	.mask_calendar {
   
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.4);
		display: none;
		z-index: 9999;
	}
	.calendar {
   
		height: 400px;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.animated {
   
		animation-duration: 1s;
		animation-fill-mode: both;
	}
	@keyframes slideInDown {
   
		from {
   
			transform: translate3d(0, -100%, 0);
			visibility: visible;
		}
 
		to {
   
			transform: translate3d(0, 0, 0);
		}
	}
	.slideInDown {
   
		animation-name: slideInDown;
	}
</style>
</head>
<body>
<div id="checkinout">
	<div id="firstSelect" style="width:100%;">
		<div class="Date_lr" style="float:left;">
			<p>入住</p>
			<input id="startDate" type="text" value=""style="" readonly>
		</div>
		<div class="Date_lr" style="float:right;">
			<p>离店</p>
			<input id="endDate" type="text" value="" style="" readonly>
		</div>
		<span class="span21">共<span class="NumDate">1</span>晚</span>
	</div>
</div>
<div class="mask_calendar">
	<div class="calendar"></div>
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script>
	$(function(){
   
		$('#firstSelect').on('click',function () {
   
			$('.mask_calendar').show();
		});
		$('.mask_calendar').on('click',function (e) {
   
			if(e.target.className == "mask_calendar"){
   
				$('.calendar').slideUp(200);
				$('.mask_calendar').fadeOut(200);
			}
		})
		$('#firstSelect').calendarSwitch({
   
			selectors : {
   
				sections : ".calendar"
			},
			index : 4,      //展示的月份个数
			animateFunction : "slideToggle",        //动画效果
			controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
			daysnumber : "90",     //控制天数
			comeColor : "#2EB6A8",       //入住颜色
			outColor : "#2EB6A8",      //离店颜色
			comeoutColor : "#E0F4F2",        //入住和离店之间的颜色
			callback :function(){
   //回调函数
				$('.mask_calendar').fadeOut(200);
				var startDate = $('#startDate').val();  //入住的天数
				var endDate = $('#endDate').val();      //离店的天数
				var NumDate = $('.NumDate').text();    //共多少晚
				console.log(startDate);
				console.log(endDate);
				console.log(NumDate);
				//下面做ajax请求
				//show_loading();
				/*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
					if(data.result==1){
						//成功
					} else {
						//失败
					}
				});*/
			}  ,
			comfireBtn:'.comfire'//确定按钮的class或者id
		});
		var b=new Date();
		var ye=b.getFullYear();
		var mo=b.getMonth()+1;
		mo = mo<10?"0"+mo:mo;
		var da=b.getDate();
		da = da<10?"0"+da:da;
		$('#startDate').val(ye+'-'+mo+'-'+da);
		b=new Date(b.getTime()+24*3600*1000);
		var ye=b.getFullYear();
		var mo=b.getMonth()+1;
		mo = mo<10?"0"+mo:mo;
		var da=b.getDate();
		da = da<10?"0"+da:da;
		$('#endDate').val(ye+'-'+mo+'-'+da);
	});
</script>
 
</body>
</html>

二、calendar.css

/* CSS Document */
*{
   
	margin:0;
	padding:0;
}
.calendar{
   
	display: none;
	position: fixed;
	width: 100%;
	/* z-index: 999999999;
	top: 0; */
	overflow: auto;
	height: 100%;
	background: #fff;
	font-family: Tahoma,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
}
.firstSelect{
   
	width:100%;
	background:#fff;
	position:fixed;
	top:0;
	left:0;
	height:100%;
	overflow:scroll;
	display:none;
}
body td{
   
	text-align:center;
	height:40px;
	}
.dateZone{
   
	width:100%;
	margin:auto;
	background:#ffffff;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	color:#666;
	margin-top: 50px;
	position: fixed;
	z-index:9999;
}
.dateZone td{
   
	background

最低0.47元/天解锁文章

南山小舍

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端仿美团酒店预订选择日期日历

一、HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>jQuery手机端仿美团酒店预订日期选择插件</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
复制链接

扫一扫