开始之前,先来看看 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

选中一个日期事件,通过e.date来获得选中的日期

monthChange

切换月份事件,通过e.date来获取切换到的日期,通过e.date.getMonth() + 1 来获得切换至的月份

KISSY.use('calendar',function(S) {
	//月份切换事件
	new S.Calendar('J_AllEvents').on('switch',function(e){
		alert('切换事件,月份切换到'+(e.date.getMonth()+1));
	});
});

rangeSelect

范围选择事件,通过e.start和e.end来获得开始和结束日期

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

确定选中时间事件,通过e.date来获得日期时间

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')的天溢出,在调试浏览器的时候应当注意.