多选日历插件推荐-Kalendae

1、简介：

        Kalendae是一款中英文日历插件，支持多种日历样式，可单联、双联、多联，支持单选日期，多选日期、联排选择、跨月选择，范围选择。

2、参考文档及源码地址

      官方文档首页及源码下载

3、使用说明

3.1 引入ccs、js文件

    在要使用日历插件的页面引入build目录下的kalendae.css和kalendae.standalone.js（或者kalendae.standalone.min.js）

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

3.2 简单使用

1.直接展示

<div class="auto-kal"></div>

2.输入框使用

<!--单选 不带参数-->
<input type="text" class="auto-kal">
<!--多选 格式化日期-->
<input type="text" class="auto-kal" data-kal="mode:'multiple',format:'YYYY-MM-DD',multipleDelimiter:';' " />

3.JavaScript使用

    <div  id="datepk"></div>
<script type="text/javascript">
    new Kalendae(document.getElementById("datepk"), {  //new Kalendae(指定容器,配置);
            months:1,  //months属性表示日历显示几个月，值：1、2、3.....；默认值：1
            mode:'multiple',  //mode属性表示显示的是单选还是多选还是范围，值：'single'、'multiple'、'range'；默认值：'single'
            subscribe: {  //subscribe属性表示绑定kalendea指定的事件，支持的事件有change、date-clicked、view-changed
                   'date-clicked': function (date) {
                       console.log(date._i, this.getSelected());
                   }
               }
        });
</script>

4.常用配置参数说明，具体请参考官方文档首页

参数	可选值及说明
mode	控件选择模式：single（单选）、multiple（多选）、range（范围选择）
months	显示月份数：[1-12]
direction	可选日期范围：past(今日以前）、today-past（今日及今日以前）、any（无限制）、today-future（今日及今日以后）、future（今日以后）
format	日期格式化字符串，列如：“YYYY-MM-DD”
multipleDelimiter	日期多选分割符，默认英文逗号分割。
selected	创建日历时选中的日期,值可以是字符串、js Date对象等。 “多选”模式下，字符串可包含多个日期，以逗号分隔，如:[2020-06-18,2020-06-19]

5、日历显示源码修改

<!--kalendae.standalone.js文件-->

<!--把英文日期修改成中文-->
_months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_')
_monthsShort : '一_二_三_四_五_六_七_八_九_十_十一_十二'.split('_')
_weekdays : '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_')
_weekdaysShort : '周日_周一_周二_周三_周四_周五_周六'.split('_')
_weekdaysMin : '日_一_二_三_四_五_六'.split('_')

<!--设置日期在文本框中的显示格式-->
defaults : util.merge(Kalendae.prototype.defaults, {
	format: 'YYYY-MM-DD',
	side: 'bottom',
	closeButton: true,
	offsetLeft: 0,
	offsetTop: 0
})

3.3 直接使用input多选日期不能正常回显

1、直接使用input多选，不能正常回显选中的多个日期，只选中最小的第一个日期。

<!--多选 格式化日期（不能正常回显选中的多个日期）-->
<input type="text" class="auto-kal" data-kal="mode:'multiple',format:'YYYY-MM-DD',multipleDelimiter:';' " />

2、使用JS创建初始化选中，解决回显问题。

<!--input直接展示-->
<input type="text"  id="datakp"  onclick="showKalendaePicker(this)"  />

<script type="text/javascript">
    //e:input对象或元素ID（这里使用input对象用于获取需要回显的日期数据,如：2020-06-18;2020-06-19）
    function showKalendaePicker(e){
	    var kd = null;
	    if(null!=e.value && ''!=e.value){
		    var produceDateStr = e.value;
	        var datesArray = new Array() ; 
	        if(null!=produceDateStr && ''!=produceDateStr){
		        var array_date = produceDateStr.split(';');
	    	    $.each(array_date,function(index,value){
			    	datesArray.push(value);
			    });
	        }
		    kd = new Kalendae.Input(e, {
			    months:1,
			    mode:'multiple',
			    format:'YYYY-MM-DD',
			    multipleDelimiter:';',
			    selected:datesArray
		    });
	    }else{
	    	kd = new Kalendae.Input(e, {
		    	months:1,
			    mode:'multiple',
			    format:'YYYY-MM-DD',
			    multipleDelimiter:';'
		    });
	    }
	    kd.show();//显示日期控件
    }
</script>

4、补充其他问题处理

4.1、PC浏览器点击选择日期无响应或选择面板关闭问题。

Kalendae.util 中添加事件判断鼠标还是触摸屏代码有问题：

if(eventName === 'mousedown' && util.isTouchDevice()) {
	//works on touch devices
	elem.addEventListener('touchstart', listener, false);
} else {
	elem.addEventListener(eventName, listener, false);
}

目前只有PC端使用：直接删除判断，只保留PC端部分代码。

//			if(eventName === 'mousedown' && util.isTouchDevice()) {
//				//works on touch devices
//				elem.addEventListener('touchstart', listener, false);
//			} else {
//				elem.addEventListener(eventName, listener, false);
//			}
//修改为以下代码：
elem.addEventListener(eventName, listener, false);