基于Jquery ui 可复用的酒店 web页面选择入住日期插件
效果图：
代码：
<!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');
