Kalendae:JavaScript日期选择和日历控件使用
2016-05-12 10:39
801 查看
源码:http://github.com/ChiperSoft/Kalendae
demo:http://www.html5tricks.com/demo/Kalendae/index.html
Kalendae是一款完全基于JavaScript的日期选择控件和日历组件,值得一提的是,Kalendae并没有依赖任何第三方的JS脚本库,而是用原生的JavaScript实现了如此功能强大的日期选择控件。
可自定义皮肤,基本不用图片,完全靠CSS文件定制皮肤。
日期选择支持单天,也支持多天区间范围。
自定义展示的日期数字。
可直接放在页面上用作日历控件。
对于选中的日期,可以自定义日期格式。
提供一些常用的日期转换函数。
针对不同的使用环境设置,如下:
单日期选择
更多javascript请参考Demo。
指定HTML元素,只需要指定需要生成的元素的class为auto-kal即可。
或者使用input来生成弹出的日期选择
缺省不需要jQuery的支持,但是提供一个jQuery插件,如果你使用jQuery,可以使用如下方式来生成一个kalendae日期选择:
format:处理如期字符串的格式
mode:选择模式
months:显示月份的个数
weekStart:显示日期开始的周
direction:过去(past)和未来(future),任何(any)等
directionScrolling:如果为true并且direction不是any,那么则不能查看direction以外的内容
blackout:不允许查看的内容
viewStartDate:定义第一个月的日期显示
dateClassMap:由日期组织的key/value的css类
demo:http://www.html5tricks.com/demo/Kalendae/index.html
Kalendae是一款完全基于JavaScript的日期选择控件和日历组件,值得一提的是,Kalendae并没有依赖任何第三方的JS脚本库,而是用原生的JavaScript实现了如此功能强大的日期选择控件。
Kalendae有以下特点:
完全基于JavaScript,无依赖,无jQuery。可自定义皮肤,基本不用图片,完全靠CSS文件定制皮肤。
日期选择支持单天,也支持多天区间范围。
自定义展示的日期数字。
可直接放在页面上用作日历控件。
对于选中的日期,可以自定义日期格式。
提供一些常用的日期转换函数。
如何使用
导入对应的javascript和CSS:<span style="font-size:14px;"><link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8"> <script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script> </span>
针对不同的使用环境设置,如下:
单日期选择
<span style="font-size:14px;">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}) });</span>
日期范围选择
<span style="font-size:14px;">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})] });</span>
多日期选择
<span style="font-size:14px;">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})] });</span>
未来/过去日期显示,隔日选择/工作日选择
<span style="font-size:14px;">//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 } });</span>
更多javascript请参考Demo。
指定HTML元素,只需要指定需要生成的元素的class为auto-kal即可。
<div class="auto-kal"></div>
或者使用input来生成弹出的日期选择
<input type="text" class="auto-kal">
缺省不需要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类
相关文章推荐
- JSP的9个内置对象
- JSON 和 NSDictionary NSArray互转
- JavaScript异步编程插件–jsDeferred.js
- js检测按键的跨浏览器解决方案
- JavaScript基本知识
- js定时器
- angular中的jsonp记录
- JavaScript—requestAnimationFrame
- js 时间和毫秒值 互转
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- 读取本地json文件
- JS实现表单的验证
- JS省市联动代码
- Js中的map
- Javascript基础视频(高清视频)
- 【原译】javascript中的正确错误处理
- jstl c:choose>、<c:when>和<c:otherwise>标签
- Hibernate JPA中@Transient、@JsonIgnoreProperties、@JsonIgnore、@JsonFormat、@JsonSerialize等注解解释
- javascript中的string与其他语言string的一些不同
- JS创建事件的三种方法(实例代码)