程序比較簡單,代碼中都有說明,這里說說怎么使用。
首先是實例化一個Calendar,并設置參數。
參數說明:
Year:要顯示的年份
Month:要顯示的月份
SelectDay:選擇日期
onSelectDay:在選擇日期觸發
onToday:在當天日期觸發
onFinish:日歷畫完后觸發
一般SelectDay設置成選擇了的日期,并在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='Javascript:void(0);' onclick=/"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;/">" + flag[i] + "</a>";
}
實例中是固定了這個日期列表,實際應用中可以根據年份月份獲取對應的日期列表,
個人推薦用年份月份通過ajax獲取。
程序中還有兩個有用的方法PreMonth(顯示上一個月)和NextMonth(顯示下一個月)。
測試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術:JavaScript blog式日歷控件新算法,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。