日期多選插件Kalendae.js

時間 2020-05-05

標籤日期插件 kalendae.js kalendae 欄目 JavaScript 简体版

原文原文鏈接

#Kalendae.js一句話介紹javascript

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

#Kalendae.js如何使用html

下載java

<link rel="stylesheet" href="./build/kalendae.css" type="text/css">
<script type='text/javascript' src='./build/kalendae.standalone.js'></script>
<!-- 這裏不引入min.js是由於在後面要修改js -->

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

###①直接使用：ui

<!-- 單選 -->
<div class="auto-kal"></div>
<!-- 多選 -->
<div class="auto-kal" data-kal="mode:'multiple'"></div>

完整代碼：this

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

###②輸入框使用.net

<!-- 單選 -->
<input type="text" class="auto-kal">
<!-- 多選 -->
<input type="text" class="auto-kal" data-kal="mode:'multiple'">

完整代碼：prototype

<!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()];
},

修改年月顯示效果：

titleFormat:'MMMM, YYYY年',

最終效果：

指定的div使用Kalendae

前面都是經過指定class來使用kalendae，能夠經過JavaScript代碼指定容器使用kalendae。

修改Kalendae.prototype的titleFormat

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

轉載 https://blog.csdn.net/qq_38245537/article/details/78247267