轉載自：日期多選插件Kalendae.js(侵權刪)
插件下載地址：Github下載
下載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> <!-- 這裏不引入min.js是因爲在後面要修改js -->
Kalendae.js一句話介紹
Kalendae.js是一款強大的日期多控件（插件），支持日期的單選、日期的多選、日期的範圍選擇
在頁面使用：新建一個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 : '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 : 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),*/
_weekdays : '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
weekdays : function (m) {
return this._weekdays[m.day()];
},
/*_weekdaysShort : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),*/
_weekdaysShort : '週日_週一_週二_週三_週四_週五_週六'.split('_'),
weekdaysShort : function (m) {
return this._weekdaysShort[m.day()];
},
/* _weekdaysMin : 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),*/
_weekdaysMin : '日_一_二_三_四_五_六'.split('_'),
weekdaysMin : function (m) {
return this._weekdaysMin[m.day()];
},
修改年月顯示效果：(這裏我沒找到)
修改Kalendae.prototype的titleFormat
titleFormat:'MMMM, YYYY年',
指定的div使用Kalendae
前面都是通過指定class來使用kalendae，可以通過js代碼指定容器使用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要相等
最終效果：
單選div：
多選div：
個性化配置好的css和js的代碼下載
鏈接：gitee下載
我的使用
<div id="paiban"></div>
<script type="text/javascript">
new Kalendae(document.getElementById("paiban") ,{
//attachTo:document.body, //將控件加到什麼屬性上，可以是DOM也可以是string
months:1, //同時展示幾個月可被選
mode:'multiple', // single單選, multiple多選, range範圍選
dayHeaderClickable: true, //這個月的星期頭是否可用被點擊
dayOutOfMonthClickable:false, //這個月之外的是否可以被選中
//selected: selected, //被選中的哪些，後面selected需要自己寫
//subscribe屬性表示綁定kalendea指定的事件，支持的事件有change、date-clicked、view-changed
subscribe: {
'date-clicked': function (date) {
console.log(date._i, this.getSelected());
}
}
})
</script>