JQUERY制作简单日历的练习作品

发布时间：2014-08-11 16:23:12　来源/作者：学技巧网页制作　分类：时间日期阅读：0次点评一下

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <meta name="format-detection" content="telephone=no" /> <title>tryMyOwnCalendar</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="application/javascript" language="javascript"> </script> <style> *{ margin:0; padding:0;} .choosecal{ width:96%; margin:3% auto; overflow:hidden;} .ccaltop{ width:100%; border-radius:5px; } .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;} .inputdate{ color:#F60;} .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> </div> <div class="caltline2"> <p style=" width:80%; text-align:left;"> <input type="text" value="" class="datetext datetoday inputdate" 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(".datetext").removeClass("inputdate"); jQuery(this).addClass("inputdate"); }); jQuery(".dateendday").click(function(){ //选择退房日期 datetxt="dateendday"; jQuery(".datetext").removeClass("inputdate"); jQuery(this).addClass("inputdate"); }); 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>

(www.xuejiqiao.com)提示：可修改后再运行代码!

JQUERY制作简单日历的练习作品，挺简单的原理，首先算出一个月有多少天，再算出这个月的第一天是星期几，接着顺序排下来就可以了。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

JQUERY制作简单日历的练习作品

可查询日期星期几的js脚本

漂亮实用的日历-JS特效

右下角显示世界各地时间的时钟js特效

JQUERY制作简单日历的练习作品