- 一款基于jquery的日期选择插件，与第一次写的有些些改进，适合酒店预订类网站用，在支持HTML5的浏览器中查看，还带有动画效果，在此提醒一下，jquery版本若是1.9.x，可能本效果会出错，按理说高版本是兼容低版本的，不知为何哦。
-
<!DOCTYPE HTML><html lang="zh-CN"><head><title>tryMyOwnCalendar酒店网站入住日期选择插件</title><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="application/javascript" language="javascript"></script><style>*{ margin:0; padding:0;}.choosecal{ width:96%; margin:3% auto; overflow:hidden;}.ccaltop{ width:99%; border-radius:5px; border:1px solid #000;}.caltline1,.caltline2{ width:94%; background-color:#F90; overflow:hidden; padding:2% 3%;}.caltline1 p,.caltline2 p{ float:left; width:10%; font-weight:700; text-align:right;}.caltline1 .bookdate{ width:90%; text-align:left;}.caltline2{ background-color:#FFF; display:none;}.caltline2 p{ width:20%;}.caltline2 .datetext{ width:35%; border:1px solid #000; background-color:#FFF; font-weight:700;}.calender{ width:100%; margin-top:3%; overflow:hidden; display:none;}.selectmouth{ background-color:#F30; width:94%; overflow:hidden;padding:2% 3%;border-radius:5px 5px 0 0;}.selectmouth p{ float:left; width:33%; color:#FFF; font-weight:700; cursor:pointer;}.selectmouth .selectdate{ width:100%; background-color:#F30; border:none; color:#FFF; font-weight:700; text-align:center;}.data_table{ width:100%;border:1px solid #cccccc;border-collapse:collapse; }.data_table thead{ background-color:#333;}.data_table thead td{ color:#FFF; text-align:center;border:1px solid #333;border-collapse:collapse; padding:1% 0;}.data_table tbody td{border:1px solid #cccccc;border-collapse:collapse; text-align:center;color:#0C6;padding:1% 0;}.data_table tbody td.orderdate{ color:#000;}.data_table tbody td.tdselect{ color:#fff;background-color:#999}</style></head><body><div class="choosecal"><div class="ccaltop"><div class="caltline1"><p class="bookdate">选择入住日期……</p><p><img src="images/iconpoint.png" /></p></div><div class="caltline2"><p style=" width:80%; text-align:left;"><input type="text" value="" class="datetext datetoday" readonly=readonly />至<input type="text" value="" class="datetext dateendday" readonly=readonly /></p><p><input type="button" value="确定" class="btsure" /></p></div></div><div class="calender"><div class="selectmouth"><p style="text-align:right" class="lastmonth"><</p><p><input type="text" class="selectdate" value="2014年2月" readonly=readonly /></p><p class="nextmonth">></p></div><table class="data_table" cellspacing="0px"><thead><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead><tbody><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><script>window.onload=function(){var mydate=new Date();var thisyear=mydate.getFullYear();var thismonth=mydate.getMonth()+1;var thisday=mydate.getDate();var mydate1=new Date();var thisyear1=mydate1.getFullYear();var thismonth1=mydate1.getMonth()+1;var thisday1=mydate1.getDate();var selectday=thisday; //标记日期var indate=thisday; //入住日期var inmonth=thismonth;//入住月份var outdate=thisday+1; //退房日期var outmonth=thismonth; //退房月份var datetxt="datetoday";var datefirst;var datesecond;function initdata(){//日期初始填充var tdheight=jQuery(".data_table tbody tr").eq(0).find("td").height();jQuery(".data_table tbody td").css("height",tdheight);jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");var days=getdaysinonemonth(thisyear,thismonth);var weekday=getfirstday(thisyear,thismonth);setcalender(days,weekday);markdate(thisyear,thismonth,selectday);orderabledate(thisyear,thismonth,thisday);}initdata();jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+thisday);jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+(thisday+1));function orderabledate(thisyear,thismonth,thisday){//能预订的日期if(thisyear<thisyear1){jQuery(".data_table tbody td").addClass("orderdate");jQuery(".data_table tbody td").removeClass("usedate");}else if(thisyear==thisyear1){if(thismonth<thismonth1){jQuery(".data_table tbody td").addClass("orderdate");jQuery(".data_table tbody td").removeClass("usedate");}else if(thismonth==thismonth1){for(var j=0;j<6;j++){for(var i=0;i<7;i++){var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();if(tdhtml<thisday){jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("orderdate");jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");}else{jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("orderdate");}}}}else{jQuery(".data_table tbody td").removeClass("orderdate");}}else{jQuery(".data_table tbody td").removeClass("orderdate");}}function markdate(thisyear,thismonth,thisday){//标记日期var datetxt=thisyear+"年"+thismonth+"月";var thisdatetxt=thisyear1+"年"+thismonth1+"月";jQuery(".data_table td").removeClass("tdselect");if(datetxt==thisdatetxt){for(var j=0;j<6;j++){for(var i=0;i<7;i++){var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();if(tdhtml==thisday){jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("tdselect");}}}}}function getdaysinonemonth(year,month){ //算某个月的总天数month=parseInt(month,10);var d=new Date(year,month,0);return d.getDate();}function getfirstday(year,month){//算某个月的第一天是星期几month=month-1;var d=new Date(year,month,1);return d.getDay();}function setcalender(days,weekday){//往日历中填入日期var a=1;for(var j=0;j<6;j++){for(var i=0;i<7;i++){if(j==0&&i<weekday){jQuery(".data_table tbody tr").eq(0).find("td").eq(i).html("");jQuery(".data_table tbody tr").eq(0).find("td").eq(i).removeClass("usedate");}else{if(a<=days){jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html(a);jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("usedate");a++;}else{jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html("");jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");a=days+1;}}}}}function errorreset(){//日期报错后，数据重置thisyear=thisyear1;thismonth=thismonth1;thisday=thisday1;selectday=thisday1;indate=thisday1;inmonth=thismonth1;outdate=thisday1+1;outmonth=thismonth1;initdata();}jQuery(".data_table tbody td.usedate").live("click",function(){//点击日期的效果var thishtml=parseInt(jQuery(this).html());jQuery(".data_table td").removeClass("tdselect");jQuery(this).addClass("tdselect");selectday=thishtml;if(datetxt=="datetoday"){jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+selectday);indate=selectday;inmonth=thismonth;}else{jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+selectday);outdate=selectday;outmonth=thismonth;if(outmonth<inmonth){alert("日期填写错误");jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));errorreset();}else if(outmonth==inmonth){if(outdate<=indate){alert("日期填写错误");jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));errorreset();}}}});jQuery(".datetoday").click(function(){//选择入住日期datetxt="datetoday";});jQuery(".dateendday").click(function(){//选择退房日期datetxt="dateendday";});jQuery(".lastmonth").click(function(){//上一个月thismonth--;if(thismonth==0){thismonth=12;thisyear--;}initdata();});jQuery(".nextmonth").click(function(){//上一个月thismonth++;if(thismonth==13){thismonth=1;thisyear++;}initdata();});jQuery(".btsure").click(function(){//确定日期var start = new Date($(".datetoday").val());var end = new Date($(".dateendday").val());var diff = parseInt((end - start) / (1000*3600*24));jQuery(".bookdate").html(inmonth+"月"+indate+"日至"+outmonth+"月"+outdate+"日("+diff+")晚")});jQuery(".caltline1").toggle(function(){jQuery(".caltline2").slideDown(500);jQuery(".calender").fadeIn(500);errorreset();jQuery(".caltline1").find("img").attr("src","images/iconpointup.png");},function(){jQuery(".caltline2").slideUp(500);jQuery(".calender").fadeOut(500);jQuery(".caltline1").find("img").attr("src","images/iconpoint.png");});}</script></body></html>
标签：网站源码
下一篇：用HTML5实现的圆形时钟倒计时