开始之前,先来看看 Calendar 能做什么:demo
这是一个交互清爽、功能实用的日历控件,支持基本的日期选择、时间选择、嵌入/弹出、范围选择、日期格式化输出等常用功能,能够满足多数的应用场景,非常方便用户调用。
Usage
new S.Calendar(trigger,config)
S.Calendar构造器,传入触点/容器id和配置项
KISSY.use('calendar',function(S) {
//静态日历,单击回调
var c = new S.Calendar('#J_Calendar').on('select',function(e){
alert(e.date);
});
});
Config
date - Date
默认显示该日期所在的月份,默认为当天
selected - Date
当前选中的日期
startDay - Number
日历显示星期x为起始日期,取值范围为0到6,默认为0,从星期日开始,若取值为1,则从星期一开始,若取值为7,则从周日开始
pages - Number
日历的页数,默认为1,包含一页日历
closable - Boolean
在弹出情况下,点选日期后是否关闭日历,默认为false
rangeSelect - Object
默认显示的选择范围,格式为:{start:s,end:n}
minDate - Date
日历可选择的最小日期,默认不开启
maxDate - Date
日历可选择的最大,默认不开启
multiSelect - Boolean
是否支持多选,默认不开启 (尚未实现)
navigator - Boolean
是否可以通过点击导航输入日期,默认开启
popup - Boolean
日历是否为弹出,默认为false,不开启
showTime - Boolean
是否显示时间的选择,默认为false,不开启
triggerType - Array | String
弹出状态下,触发弹出日历的事件,例如:['click','focus'],也可以直接传入'focus',默认为['click']
Events
select
monthChange
KISSY.use('calendar',function(S) {
//月份切换事件
new S.Calendar('J_AllEvents').on('switch',function(e){
alert('切换事件,月份切换到'+(e.date.getMonth()+1));
});
});
rangeSelect
KISSY.use('calendar',function(S) {
//选择范围,并绑定范围回调
new S.Calendar('J_Range',{
multi_page:2,
range_select:true
}).on('rangeselect',function(e){
alert(e.start+' '+e.end);
});
});
timeSelect
KISSY.use('calendar',function(S) {
//日历可选择time
c = new S.Calendar('#J_WithTime',{
showTime:true
}).on('timeSelect',function(e){
alert(e.date);
});
});
Methods
toggle
切换日历的状态,从显示到隐藏和从隐藏到显示
render
通过render可以带入如上任意参数并重新渲染日历
KISSY.use('calendar',function(S) {
c = new S.Calendar('#J_WithTime');
c.render({maxDate:new Date()});
});
hide
如果日历是弹出形式,隐藏日历
show
显示日历
关于日历的设计,请参照日历控件的设计
一些需要注意的地方:
理论上,可以日历中的子日历可以生成无数个,但超过3个的情况需要自定义css:增加class为“multi-2”的样式,请自行在css文件中添加。
日历阴影用css3来定义,在opera和ie下日历无阴影,在ie下用滤镜模拟阴影效果
在chrome中,日期不支持诸如new Date('2009/12/35')的天溢出,在调试浏览器的时候应当注意.
Usage
Config
- date
- selected
- startDay
- pages
- closable
- rangeSelect
- minDate
- maxDate
- multiSelect
- navigator
- showTime
- triggerType