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

來源:互聯網
上載者:User

使用說明:

程式比較簡單,代碼中都有說明,這裡說說怎麼使用。
首先是執行個體化一個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(顯示下一個月)。

測試代碼: xmlns="http://www.w3.org/1999/xhtml">


<<>>

2008年 8月

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.