jQuery简单实现日历的方法

前端技术 2023/09/08 JavaScript

本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下：

原理挺简单的，首先算出一个月有多少天，再算出这个月的第一天是星期几，接着顺序排下来就可以了.

<!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=\"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%;}
.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>
  <p><img src=\"images/next.png\" /></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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21973

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案