效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery酒店预订日历代码</title>
<link rel="stylesheet" type="text/css" href="css/global.css"/>
<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body class="ticketBody">
<!--中间-->
<div class="webIndex">
<div class="stay-list clearFloat">
<div class="stay-list-left">
<h3 class="search-title">住宿预订</h3>
<form>
<div class="sea-div">
<label class="search-lab">目的地</label><input type="text" placeholder="景区或酒店名称" class="hotel-name" id="disHotel"/>
</div>
<div class="sea-div">
<label class="search-lab">入住日期</label><input type="text" readonly id="startDate"/>
</div>
<div class="sea-div">
<label class="search-lab">退房日期</label><input type="text" readonly id="endDate"/>
</div>
<div class="sea-div">
<label class="search-lab">入住日期</label><input type="text" readonly id="startDate11"/>
</div>
<div class="sea-div">
<label class="search-lab">退房日期</label><input type="text" readonly id="endDate11"/>
</div>
</form>
</div>
</div>
</div> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/stay.js"></script> </body>
</html>
//JS处理时间库
<script type="text/javascript" src="js/moment.min.js"></script>
主要js文件
<script type="text/javascript" src="js/stay.js"></script>
：
/*******住宿时间控件******/
(function($){
function stay (startEle,endEle){
this.start = $('#'+startEle);
this.end = $('#'+endEle);
this.today = new Date();
this.init();
} stay.prototype = {
constructor : stay,
init:function(){
this.inputVal();
this.endFun();
this.startFun();
},
startFun:function(){
var This = this;
This.start.datepicker({
dateFormat : 'yy-mm-dd',
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
altFormat : 'yy-mm-dd',
yearSuffix:'年',
showMonthAfterYear:true,
appendText : '明天',
firstDay : 1,
showOtherMonths:true,
minDate : 0,
maxDate:180,
onSelect:function(dateText,inst){
This.end.datepicker('option', 'minDate', new Date(moment(dateText).add('days', 1)));
This.end.datepicker('option', 'maxDate', new Date(moment(dateText).add('days', 180)));
var strDay = This.compare($(this));
This.start.datepicker('option', 'appendText', strDay);
if((new Date(This.end.val()) - new Date(dateText)) <= (24*60*60*1000)){
This.end.datepicker('option', 'appendText', This.compare(This.end));
}
} });
},
endFun:function(){
var This = this;
This.end.datepicker('refresh');
This.end.datepicker({
dateFormat : 'yy-mm-dd',
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
altFormat : 'yy-mm-dd',
yearSuffix:'年',
showMonthAfterYear:true,
appendText : '后天',
firstDay : 1,
showOtherMonths:true,
minDate : 1,
maxDate:180,
onSelect:function(){
This.end.datepicker('option', 'appendText', This.compare($(this)));
}
});
},
transformStr:function(day,strDay){
switch (day){
case 1:
strDay = '星期一';
break;
case 2:
strDay = '星期二';
break;
case 3:
strDay = '星期三';
break;
case 4:
strDay = '星期四';
break;
case 5:
strDay = '星期五';
break;
case 6:
strDay = '星期六';
break;
case 0:
strDay = '星期日';
break;
}
return strDay;
},
compare:function(obj){
var strDay = '今天';
var myDate = new Date(this.today.getFullYear(),this.today.getMonth(),this.today.getDate());
var day = (obj.datepicker('getDate') - myDate)/(24*60*60*1000);
day == 0 ? strDay: day == 1 ?
(strDay = '明天') : day == 2 ?
(strDay = '后天') : (strDay = this.transformStr(obj.datepicker('getDate').getDay(),strDay));
return strDay;
},
inputVal:function(){
this.inputTimes(this.start,1);
this.inputTimes(this.end,2);
},
inputTimes:function(obj,day){
var m = new Date(moment(this.today).add('days', day));
obj.val(m.getFullYear() + "-" + this.addZero((m.getMonth()+1)) + "-" + this.addZero(m.getDate()));
},
addZero:function(num){
num < 10 ? num = "0" + num : num ;
return num;
}
}
window.stay = stay; })(jQuery);
//调用1
var ss = new stay('startDate','endDate');
//调用2
var ss11 = new stay('startDate11','endDate11');