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);