下载
(Github下载|csdn下载)下载Kalendae.js相关的资源,解压后将build目录下的js和css拷贝到项目相应的资源文件夹下面,在需要使用日期多选的页面引入js和css就行了:
只需要用到这两个js和css样式就可以了;
Kalendae.js的个性化配置
日期中文显示
默认显示的样式是英文的,用户不友好,可以在kalendae.standalone.js里面进行编辑,设置Locale.prototype
修改“星期”显示效果:
修改_weekdays 、_weekdaysShort 和_weekdaysMin
最终代码:
然后可以新建一个demo.html页面,引用css和js就可以开发了:
var kal = new Kalendae({
attachTo: document.getElementById('calendar'),
direction: 'future', //past过去 today-past过去(包括当天) future未来 today-future未来(包括当天) any任何
months: 1, //展示几个月
mode: 'multiple', //模式 single 单选, multiple 多选, range 范围选择
dayHeaderClickable: true //指定 direction设定的进行展示,其他不展示
//selected: selected
});
//kal.setSelected("2019-01-21,2019-01-23"); //设置选中日期,多个用逗号隔开
//kal.getSelected(); //获得选中日期
展示效果:
<p>输入框使用(单选):</p>
<input type=
"text"
class=
"auto-kal"
>
<p>输入框使用(多选):</p>
<input type=
"text"
class=
"auto-kal"
data-kal=
"mode:'multiple'"
>
展示效果: