JavaScript blog式日曆控制項新演算法-js教程-PHP中文網

JavaScript blog式日曆控制項新演算法

高洛峰

發布： 2017-01-04 13:58:26

原創

1135 人瀏覽過

使用說明：

程式比較簡單，程式碼中都有說明，這裡說說怎麼使用。
首先是實例化一個Calendar，並且設定參數。
參數說明：
Year:要顯示的年份
Month:要顯示的月份
SelectDay:選擇日期
onSelectDay:在選擇日期觸發
onToday:在當天觸發成選擇了的日期，並在onSelectDay中設定一個函數用來設定這個日期的樣式，
例如實例裡SelectDay設定成今個月10號並在當天樣式設為onSelect：

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

登入後複製

而onToday就用來設定今日日期的樣式，
例如實例裡面把今天的日期的樣式設為onToday：

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要設定日曆的程式。
可以透過this.Year和this.Month取得目前日曆顯示的年份和月份。
對有資料的日期的也在這裡設置，例如實例中是有一個當前月份的有資料的日期列表，然後根據這個列表對相應的日期進行設定：

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

登入後複製

實例中是固定了這個日期列表，實際應用中可以根據年份月份取得對應的日期列表，
個人推薦用年份月份透過ajax取得。

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

測試程式碼：

 
 
 
 
blog式日历控件_www.jb51.net_脚本之家 

 
 
 
 
 
<< 
>> 
2008年 8月 
 
 
 
日 
一 
二 
三 
四 
五 
六

登入後複製

更多JavaScript blog式日曆控制項新演算法相關文章請關注PHP中文網！