<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</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="calendar.css" />
	<style type="text/css">
		/* .mask_calendar {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0,0,0,.4);
			display: none;
		}
		.calendar {
			height: 400px;
			position: fixed;
			bottom: 0;
			left: 0;
		} */
		.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;
		}
		/*提示*/
		.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;
		}
		.calendar_tishi {
			width: 150px;
			height: 30px;
			padding: 12px;
			background: rgba(0,0,0,.6);
			position: fixed;
			top: 0;
			bottom: 120px;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			font-size: 16px;
			text-align: center;
			border-radius: 4px;
			display:none;
		}
	</style>
</head>
<body>
	<!-- <div id="firstSelect">
		<input type="text" id="startDate" readonly />
		<input type="text" id="endDate" readonly/>
	</div> -->
	<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 class="calendar_tishi">请选择离店日期...</div>
	</div>
	
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="date.js"></script>
	<script>
		$(function(){
			$('#firstSelect').on('click',function (e) {
				e.stopPropagation();
                e.preventDefault();
				$('.mask_calendar').show();
			});
			$('.mask_calendar').on('click',function (e) {
				e.stopPropagation();
                e.preventDefault();
				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请求
                },   
                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>