开始之前，先来看看 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')的天溢出，在调试浏览器的时候应当注意.

home › calendar :