日期多选插件Kalendae.js

Kalendae.js一句话介绍

<<Kalendae.js是一款强大的日期多控件（插件），支持日期的单选、日期的多选、日期的范围选择案例

Kalendae.js如何使用

下载

<link rel="stylesheet" href="./build/kalendae.css" type="text/css">
<script type=\'text/javascript\' src=\'./build/kalendae.standalone.js\'></script>
<!-- 这里不引入min.js是因为在后面要修改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属性和_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属性表示日历显示几个月，值：1、2、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