<!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">
/* .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;
}
</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>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
