Kalendae 日期選擇器實際執行畫面

Kalendae 支持 IE8 以上版本的瀏覽器，完全不依賴框架所製作而成可以方便簡單的移植到任何你要的網頁之上，完全可以輕鬆地更換日期樣式，可配置一次顯示的月數，可以支援選擇單日或者是多個不連續的日期或者是一個日期的範圍，能夠輸出各種的日期格式簡單方便輸出。可直接顯示於網頁上也可像一班的日期選擇器一樣，依附在網頁表單元件 input 的方式呈現。

使用方法：
第一步 載入程式所需要用到的檔案
//Kalendae 的CSS樣式檔案
<link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8">
//Kalendae 的主程式碼
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>

建立方法很多種可選擇你方便而且適合你的方式
<div class="auto-kal"></div> <!--自動建立一個日曆方塊-->
<input type="text" class="auto-kal"> <!--自動建立一個日期選擇器-->
<div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>
<!-- 自動建立並傳入參數 顯示三個月 -->
<input type="text" value="2/16/2012" id="input1"> <!--使用ID建立 -->


使用 JavaScript 建立日曆方塊
var k4 = new Kalendae.Input('input1', {
     months:2  //顯示兩個月 對應上面的 id="input1"
});
new Kalendae({
     attachTo:document.body,
     months:2,
     mode:'single',
     selected:Kalendae.moment().subtract({M:1})
});  //單選一次顯示兩個月
new Kalendae(document.body, {
     months:1,
     mode:'range',
     selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
});  //範圍選擇顯示一個月
new Kalendae({
     attachTo:document.body,
     months:3,
     mode:'multiple',
     selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
}); //多選一次顯示三個月

附上部分可修改之參數

參數	說明
attachTo	日曆顯示到的元素名稱
format	日期格式
mode	選擇模式 single(單選),multiple(多選),range(範圍)
selected	啟動時選擇的日期
months	日曆一次顯示月數
weekStart	每周的第一天顯示.0=星期日.預設0
direction	顯示日期接受範圍 past(過去),today-past(過去現在),any(任何時間),today-future(現在未來),future(未來)
directionScrolling	是否允許到接受範圍日期之外
blackout	是否防止日期被選擇.可指定範圍
viewStartDate	開啟時的第一個月
dateClassMap	日期的 Class 樣式
dayOutOfMonthClickable	允許超過目前月份的選擇
useYearNav	是否可使用雙箭頭導航年分

作者網站：https://github.com/ChiperSoft/Kalendae
檔案大小：51.3 KB (包含範例)
檔案下載：https://github.com/ChiperSoft/Kalendae
檔案備份：下載