日期多選插件Kalendae.js

07-14

日期多選插件Kalendae.js

來自專欄我的編程不歸路4 人贊了文章

在項目中要實現日期多選的功能，於是在網上找到Kalendae.js，此文主要記錄本人對於Kalendae.js的一些用法，以便以後查閱，希望對讀者也有所幫助

主要內容如下：

一句話介紹Kalendae.js

Kalendae.js如何使用

Kalendae.js的個性化配置

Kalendae.js一句話介紹

Kalendae.js是一款強大的日期多控制項（插件），支持日期的單選、日期的多選、日期的範圍選擇
案例

Kalendae.js如何使用

下載

（Github下載|csdn下載）下載Kalendae.js相關的資源，解壓後將build目錄下的js和css拷貝到項目相應的資源文件夾下面，在需要使用日期多選的頁面引入js和css就行了：

<link rel="stylesheet" href="./build/kalendae.css" type="text/css"><script type=text/javascript src=./build/kalendae.standalone.js></script>

在頁面使用：新建一個demo.html

①直接使用：

<div class="auto-kal"></div><div class="auto-kal" data-kal="mode:multiple"></div>

完整代碼：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type=text/javascript src=./build/kalendae.standalone.js></script> <title>KalendaeDemo</title></head><body> <p>1直接展示（單選）</p> <div class="auto-kal"></div> <p>1.1直接展示（多選）</p> <div class="auto-kal" data-kal="mode:multiple"></div></body></html>

②輸入框使用

<input type="text" class="auto-kal"><input type="text" class="auto-kal" data-kal="mode:multiple">

完整代碼：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type=text/javascript src=./build/kalendae.standalone.js></script> <title>KalendaeDemo</title></head><body> <p>2輸入框使用（單選）：</p> <input type="text" class="auto-kal"> <p>2輸入框使用（多選）：</p> <input type="text" class="auto-kal" data-kal="mode:multiple" style="width: 100%;"></body></html>

demo.html完整代碼：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type=text/javascript src=./build/kalendae.standalone.js></script> <title>KalendaeDemo</title></head><body> <p>1直接展示（單選）</p> <div class="auto-kal"></div> <p>1.1直接展示（多選）</p> <div class="auto-kal" data-kal="mode:multiple"></div> <p>2輸入框使用（單選）：</p> <input type="text" class="auto-kal"> <p>2輸入框使用（多選）：</p> <input type="text" class="auto-kal" data-kal="mode:multiple" style="width: 100%;"></body></html>

Kalendae.js的個性化配置

日期中文顯示

默認顯示的樣式是英文的，用戶不友好，可以在kalendae.standalone.js裡面進行編輯，設置Locale.prototype

修改月份顯示效果：

/*修改_months屬性和_monthsShort屬性*/_months : 1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月.split(_)_monthsShort : 1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月.split(_)

最終是這樣子的：

/*_months : January_February_March_April_May_June_July_August_September_October_November_December.split(_),*/_months : 1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月.split(_),months : function (m) { return this._months[m.month()];},/*_monthsShort : Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec.split(_),*/_monthsShort : 1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月.split(_),monthsShort : function (m) { return this._monthsShort[m.month()];},

修改「星期」顯示效果：

修改_weekdays 、_weekdaysShort 和_weekdaysMin

最終代碼：

//星期顯示樣式_weekdays : 星期日_星期一_星期二_星期三_星期四_星期五_星期六.split(_),weekdays : function (m) { return this._weekdays[m.day()];},_weekdaysShort : 周日_周一_周二_周三_周四_周五_周六.split(_),weekdaysShort : function (m) { return this._weekdaysShort[m.day()];},_weekdaysMin : 日_一_二_三_四_五_六.split(_),weekdaysMin : function (m) { return this._weekdaysMin[m.day()];},

修改年月顯示效果：

修改Kalendae.prototype的titleFormat

titleFormat:MMMM, YYYY年,

指定的div使用Kalendae

前面都是通過指定class來使用kalendae，可以通過JavaScript代碼指定容器使用kalendae。

<div id="datepk"></div><script type="text/javascript"> /*使用方式： new Kalendae(指定容器,配置); 配置屬性註解： months屬性表示日曆顯示幾個月，值：1、2、3.....；默認值：1 mode屬性表示顯示的是單選還是多選還是範圍，值：single、multiple、range；默認值：single subscribe屬性表示綁定kalendea指定的事件，支持的事件有change、date-clicked、view-changed */ new Kalendae(document.getElementById("datepk"), { months:1, mode:multiple, subscribe: { date-clicked: function (date) { console.log(date._i, this.getSelected()); } } });</script>

完整代碼：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type=text/javascript src=./build/kalendae.standalone.js></script> <title>KalendaeDemo</title></head><body> <p>3指定div使用（多選）：</p> <div id="datepk" style="width: 100%;"></div></body><script type="text/javascript"> new Kalendae(document.getElementById("datepk"), { months:1, mode:multiple, subscribe: { date-clicked: function (date) { console.log(date._i, this.getSelected()); } } });</script></html>

修改控制項顯示的大小

（問題：當頁面很小的時候布局會亂……）

修改kalendae.css

設置.kalendae .k-calendar的width為100%;

.kalendae .k-calendar { display: inline-block; zoom:1; *display:inline; /* width改為100% width:155px;*/ width: 100%; vertical-align:top;}

設置.kalendae .k-title,

.kalendae .k-header,

.kalendae .k-days 的width為100%；

.kalendae .k-title,.kalendae .k-header,.kalendae .k-days { /* width改為100% */ /* width:154px; */ width: 100%; display:block; overflow:hidden;}

.kalendae .k-header span 的width為12.8%；

.kalendae .k-header span { text-align:center; font-weight:bold; /* 這裡的width要和.kalendae .k-days span 裡面的相等 */ width:12.8%; padding:1px 0; color:#666;}

.kalendae .k-days span 的width為12.8%；

.kalendae .k-days span { /* 水平居中 */ text-align:center; width:12.8%; /* 高度 4.5em效果比較好 height等於line-height就能垂直居中了 */ height:4.5em; line-height:4.5em; padding:2px 3px 2px 2px; border:1px solid transparent; border-radius:3px; color:#999;}

.kalendae .k-header span 和.kalendae .k-days span的width要相等

設置文字顯示的樣式：

個性化配置的css和js demo代碼下載

the end：知乎的編輯器真難用。。。。。。。。不支持markdown......