強大的獨立日期選擇器(date picker)插件 - Kalendae

日期：2012-4-16  來源：GBin1.com

在線演示  本地下載

今天分享一個獨立的日期選擇插件Kalendae，Kalendae是 一個強大健壯的獨立日期選擇器。如果你不想使用重量的jQuery UI類庫的話，這個插件肯定是一個不錯的備選。Kalendae包含了豐富的插件選項，配置，屬性，事件和函數。給予你豐富和靈活的方式來創建日期選擇 器。當然它內含了一個強大的日期處理javascript插件 - moment.js， 這個類庫我們也曾經介紹過(不容錯過的超棒Javascript日期處理類庫-Moment.js)，能夠靈活的處理和格式化日期。

主要特性

• 完全支持各平台移植，沒有任何類庫依賴，不要求jQuery， prototype，或者Mootools。只需要添加腳本和樣式
• 支持主題和皮膚。缺省的主題只使用一個圖片文件，其它配置使用CSS
• 支持單天，多天或者日期區域選擇
• 可配置月份選擇
• 可作為一個行內的插件在頁面中使用，或者綁定輸入框來調用
• 可綁定到頁面中任何元素，不僅僅是已命名元素
• 支持多種類型配置例如，隔日選擇/工作日選擇 ，未來/過去，可定義為數組或者通過callback配置
• 日期輸出類型可支持不同的格式，利用moment.js來高效處理和解析日期

如何使用

導入對應的javascript和CSS：

<link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8">
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script> 

針對不同的使用環境設置，如下：

單日期選擇

new Kalendae(document.body, {
    months:1,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:2,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:3,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

日期范圍選擇

....

來源：強大的獨立日期選擇器(date picker)插件 - Kalendae