前端实用技巧：强大的独立日期选择器(date picker)插件-Kalendae

今天分享一个独立的日期选择插件Kalendae，Kalendae是一个强大健壮的独立日期选择器。

如果你不想使用重量的jQuery UI类库的话，这个插件肯定是一个不错的备选。Kalendae包含了丰富的插件选项，配置，属性，事件和函数。给予你丰富和灵活的方式来创建日期选择器。当然它内含了一个强大的日期处理javascript插件 - moment.js，能够灵活的处理和格式化日期。

主要特性

完全支持各平台移植，没有任何类库依赖，不要求jQuery， prototype，或者Mootools。只需要添加脚本和样式

支持主题和皮肤。缺省的主题只使用一个图片文件，其它配置使用CSS

支持单天，多天或者日期区域选择

可配置月份选择

可作为一个行内的插件在页面中使用，或者绑定输入框来调用

可绑定到页面中任何元素，不仅仅是已命名元素

支持多种类型配置例如，隔日选择/工作日选择 ，未来/过去，可定义为数组或者通过callback配置

日期输出类型可支持不同的格式，利用moment.js来高效处理和解析日期

如何使用

导入对应的javascript和CSS：

针对不同的使用环境设置，如下：

​

单日期选择 

new Kalendae(document.body, {

months:1,

mode:'single',

selected:Kalendae.moment().subtract({M:1})

});

new Kalendae({

attachTo:document.body,

months:2,

mode:'single',

selected:Kalendae.moment().subtract({M:1})

});

new Kalendae({

attachTo:document.body,

months:3,

mode:'single',

selected:Kalendae.moment().subtract({M:1})

});

日期范围选择

new Kalendae(document.body, {

months:1,

mode:'range',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

new Kalendae({

attachTo:document.body,

months:2,

mode:'range',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

new Kalendae({

attachTo:document.body,

months:3,

mode:'range',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

【前端学习交流裙,330336289，进裙邀请码（编号）：寂静 。欢迎自学的小白和大神。裙内不定时分享干货，包括2018最新的前端企业案例学习资料和零基础入门教程，欢迎自学的小白和大神】

多日期选择

new Kalendae(document.body, {

months:1,

mode:'multiple',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

new Kalendae({

attachTo:document.body,

months:2,

mode:'multiple',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

new Kalendae({

attachTo:document.body,

months:3,

mode:'multiple',

selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]

});

未来/过去日期显示，隔日选择/工作日选择

//direction

new Kalendae(document.body, {

months:3,

direction:'future'

});

//direction

new Kalendae(document.body, {

months:3,

direction:'past'

});

//blackout

new Kalendae(document.body, {

blackout: function (date) {

return Kalendae.moment(date).date() % 2; //blackout every other day

}

});

//blackout AND direction

new Kalendae(document.body, {

direction:'future',

blackout: function (date) {

return [1,0,0,0,0,0,1][Kalendae.moment(date).day()]; //blackout weekends

}

});

指定HTML元素，只需要指定需要生成的元素的class为auto-kal即可。

或者使用input来生成弹出的日期选择 

缺省不需要jQuery的支持，但是提供一个jQuery插件，如果你使用jQuery，可以使用如下方式来生成一个kalendae日期选择：

$(selector).kalendae(options);

主要选项

attachTo：日期选择器绑定的元素

format：处理如期字符串的格式

mode：选择模式

months：显示月份的个数

weekStart：显示日期开始的周

direction：过去(past)和未来(future)，任何(any)等

directionScrolling：如果为true并且direction不是any，那么则不能查看direction以外的内容

blackout：不允许查看的内容

viewStartDate：定义第一个月的日期显示

dateClassMap：由日期组织的key/value的css类