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

時間 2019-11-12

標籤強大獨立日期選擇器 date picker 插件 kalendae 简体版

原文原文鏈接

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

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

主要特性

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

如何使用

導入對應的javascript和CSS：java

<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>

針對不一樣的使用環境設置，以下：git

單日期選擇

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})
});