jQuery简单实现日历的方法
本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下：
原理挺简单的，首先算出一个月有多少天，再算出这个月的第一天是星期几，接着顺序排下来就可以了.
<!DOCTYPEHTML>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>
<metaname="format-detection"content="telephone=no"/>
<title>tryMyOwnCalendar</title>
<scriptsrc="js/jquery.min.js"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%;}
.caltline1p,.caltline2p{float:left;width:10%;font-weight:700;text-align:right;}
.caltline1.bookdate{width:90%;text-align:left;}
.caltline2{background-color:#FFF;display:none;}
.caltline2p{width:20%;}
.caltline2.datetext{width:35%;border:1pxsolid#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:5px5px00;}
.selectmouthp{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:1pxsolid#cccccc;
border-collapse:collapse;}
.data_tablethead{background-color:#333;}
.data_tabletheadtd{color:#FFF;text-align:center;
border:1pxsolid#333;border-collapse:collapse;padding:1%0;
}
.data_tabletbodytd{border:1pxsolid#cccccc;
border-collapse:collapse;
text-align:center;color:#0C6;padding:1%0;
}
.data_tabletbodytd.orderdate{color:#000;}
.data_tabletbodytd.tdselect{color:#fff;background-color:#999}
</style>
</head>
<body>
<divclass="choosecal">
<divclass="ccaltop">
<divclass="caltline1">
<pclass="bookdate">选择入住日期……</p>
<p><imgsrc="images/next.png"/></p>
</div>
<divclass="caltline2">
<pstyle="width:80%;text-align:left;">
<inputtype="text"value=""
class="datetextdatetodayinputdate"readonly=readonly/>
至
<inputtype="text"value=""class="datetextdateendday"
readonly=readonly/>
</p>
<p><inputtype="button"value="确定"class="btsure"/></p>
</div>
</div>
<divclass="calender">
<divclass="selectmouth">
<pstyle="text-align:right"class="lastmonth"><</p>
<p><inputtype="text"class="selectdate"value="2014年2月"readonly=readonly/></p>
<pclass="nextmonth">></p>
</div>
<tableclass="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(){
varmydate=newDate();
varthisyear=mydate.getFullYear();
varthismonth=mydate.getMonth()+1;
varthisday=mydate.getDate();
varmydate1=newDate();
varthisyear1=mydate1.getFullYear();
varthismonth1=mydate1.getMonth()+1;
varthisday1=mydate1.getDate();
varselectday=thisday;
//标记日期
varindate=thisday;
//入住日期
varinmonth=thismonth;
//入住月份
varoutdate=thisday+1;
//退房日期
varoutmonth=thismonth;
//退房月份
vardatetxt="datetoday";
vardatefirst;
vardatesecond;
functioninitdata(){
//日期初始填充
vartdheight=jQuery(".data_tabletbodytr").eq(0).find("td").height();
jQuery(".data_tabletbodytd").css("height",tdheight);
jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");
vardays=getdaysinonemonth(thisyear,thismonth);
varweekday=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));
functionorderabledate(thisyear,thismonth,thisday){
//能预订的日期
if(thisyear<thisyear1){
jQuery(".data_tabletbodytd").addClass("orderdate");
jQuery(".data_tabletbodytd").removeClass("usedate");
}elseif(thisyear==thisyear1){
if(thismonth<thismonth1){
jQuery(".data_tabletbodytd").addClass("orderdate");
jQuery(".data_tabletbodytd").removeClass("usedate");
}elseif(thismonth==thismonth1){
for(varj=0;j<6;j++){
for(vari=0;i<7;i++){
vartdhtml=jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).html();
if(tdhtml<thisday){
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).addClass("orderdate");
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).removeClass("usedate");
}else{
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).removeClass("orderdate");
}
}
}
}else{
jQuery(".data_tabletbodytd").removeClass("orderdate");
}
}else{
jQuery(".data_tabletbodytd").removeClass("orderdate");
}
}
functionmarkdate(thisyear,thismonth,thisday){
//标记日期
vardatetxt=thisyear+"年"+thismonth+"月";
varthisdatetxt=thisyear1+"年"+thismonth1+"月";
jQuery(".data_tabletd").removeClass("tdselect");
if(datetxt==thisdatetxt){
for(varj=0;j<6;j++){
for(vari=0;i<7;i++){
vartdhtml=jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).html();
if(tdhtml==thisday){
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).addClass("tdselect");
}
}
}
}
}
functiongetdaysinonemonth(year,month){
//算某个月的总天数
month=parseInt(month,10);
vard=newDate(year,month,0);
returnd.getDate();
}
functiongetfirstday(year,month){
//算某个月的第一天是星期几
month=month-1;
vard=newDate(year,month,1);
returnd.getDay();
}
functionsetcalender(days,weekday){
//往日历中填入日期
vara=1;
for(varj=0;j<6;j++){
for(vari=0;i<7;i++){
if(j==0&&i<weekday){
jQuery(".data_tabletbodytr").eq(0).find("td").eq(i).html("");
jQuery(".data_tabletbodytr").eq(0).find("td").eq(i).removeClass("usedate");
}else{
if(a<=days){
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).html(a);
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).addClass("usedate");
a++;
}else{
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).html("");
jQuery(".data_tabletbodytr").eq(j).find("td").eq(i).removeClass("usedate");
a=days+1;
}
}
}
}
}
functionerrorreset(){
//日期报错后，数据重置
thisyear=thisyear1;
thismonth=thismonth1;
thisday=thisday1;
selectday=thisday1;
indate=thisday1;
inmonth=thismonth1;
outdate=thisday1+1;
outmonth=thismonth1;
initdata();
}
jQuery(".data_tabletbodytd.usedate").live("click",function(){//点击日期的效果
varthishtml=parseInt(jQuery(this).html());
jQuery(".data_tabletd").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();
}elseif(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(){
//确定日期
varstart=newDate($(".datetoday").val());
varend=newDate($(".dateendday").val());
vardiff=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>
希望本文所述对大家的jQuery程序设计有所帮助。