社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

jQuery簡單實作日曆的方法_jquery

WBOY
發布： 2016-05-16 16:01:06
原創
1350 人瀏覽過

本文實例講述了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程式設計有所幫助。

相關標籤：
jquery
來源：php.cn
上一篇：JS實作隨機亂撞彩色圓球特效的方法_javascript技巧 下一篇：jquery外掛程式jSignature實作手動簽章_jquery
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
來自於 2024-04-05 09:26:49
0
1
1418
需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
我已經透過書籤在純 CSS 中創建了一個元素。它已創建，但不可見 我的程式碼如下：g=document.createElement('div');g.setAttribute("id","divcontainer&q...
來自於 2024-04-04 17:27:27
0
1
417
在 Safari/Firefox iOS 上無法傳送表單數據 這適用於除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...
來自於 2024-04-04 12:53:48
0
1
303
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板