快捷導(dǎo)航

JavaScript blog式日歷控件新算法

更新時間：2008年09月15日 10:18:32 作者：

近來要做一個記事本系統(tǒng)，想找一個合適的日歷控件，但網(wǎng)上的都是那種日歷選擇控件。于是到qq的記事本系統(tǒng)找了一個，但里面的算法有點落后，所以用了它的樣式自己寫了個。

使用說明：

程序比較簡單，代碼中都有說明，這里說說怎么使用。
首先是實例化一個Calendar，并設(shè)置參數(shù)。
參數(shù)說明：
Year:要顯示的年份
Month:要顯示的月份
SelectDay:選擇日期
onSelectDay:在選擇日期觸發(fā)
onToday:在當(dāng)天日期觸發(fā)
onFinish:日歷畫完后觸發(fā)

一般SelectDay設(shè)置成選擇了的日期，并在onSelectDay中設(shè)置一個函數(shù)用來設(shè)置這個日期的樣式，
例如實例里SelectDay設(shè)置成今個月10號并在那天樣式設(shè)為onSelect：

復(fù)制代碼代碼如下:

SelectDay: new Date().setDate(10), 
onSelectDay: function(o){ o.className = "onSelect"; }, 

而onToday就用來設(shè)置今日日期的樣式，
例如實例里面把今天的日期的樣式設(shè)為onToday：

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要設(shè)置日歷的程序。
可以通過this.Year和this.Month獲取當(dāng)前日歷顯示的年份和月份。
對有數(shù)據(jù)的日期的也在這里設(shè)置，例如實例中是有一個當(dāng)前月份的有數(shù)據(jù)的日期列表，然后根據(jù)這個列表對相應(yīng)的日期進行設(shè)置：

復(fù)制代碼代碼如下:

var flag = [10,15,20]; 
for(var i = 0, len = flag.length; i < len; i++){ 
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>"; 
} 

實例中是固定了這個日期列表，實際應(yīng)用中可以根據(jù)年份月份獲取對應(yīng)的日期列表，
個人推薦用年份月份通過ajax獲取。

程序中還有兩個有用的方法PreMonth（顯示上一個月）和NextMonth（顯示下一個月）。

測試代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog式日歷控件_www.fzitv.net_腳本之家</title> </head> <body>  <style type="text/css"> .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } </style> <div   id="wppm3vysvbp"   class="Calendar"> <div   class="wppm3vysvbp"   id="idCalendarPre">&lt;&lt;</div> <div   class="wppm3vysvbp"   id="idCalendarNext">&gt;&gt;</div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: