今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器。
如果你不想使用重量的jQuery UI类库的话,这个插件肯定是一个不错的备选。Kalendae包含了丰富的插件选项,配置,属性,事件和函数。给予你丰富和灵活的方式来创建日期选择器。当然它内含了一个强大的日期处理javascript插件 - moment.js,能够灵活的处理和格式化日期。
主要特性
完全支持各平台移植,没有任何类库依赖,不要求jQuery, prototype,或者Mootools。只需要添加脚本和样式
支持主题和皮肤。缺省的主题只使用一个图片文件,其它配置使用CSS
支持单天,多天或者日期区域选择
可配置月份选择
可作为一个行内的插件在页面中使用,或者绑定输入框来调用
可绑定到页面中任何元素,不仅仅是已命名元素
支持多种类型配置例如,隔日选择/工作日选择 ,未来/过去,可定义为数组或者通过callback配置
日期输出类型可支持不同的格式,利用moment.js来高效处理和解析日期
如何使用
导入对应的javascript和CSS:
针对不同的使用环境设置,如下:
【
前端学习交流裙:三三零三三六二八九,进裙邀请码(编号):寂静 , 不填不通过。
裙内不定时分享干货和各类源码,包括2018最新的前端企业案例学习资料和零基础入门教程,欢迎自学的小白和大神入群学习交流,分享技术。
】
单日期选择
日期范围选择
多日期选择
未来/过去日期显示,隔日选择/工作日选择
指定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类
领取专属 10元无门槛券
私享最新 技术干货