Calendar

这是一个交互清爽、功能实用的日历控件.
支持基本的日期选择、时间选择、嵌入/弹出、范围选择、日期格式化输出等常用功能, 能够满足多数的应用场景, 非常方便用户调用.
KISSY.use('calendar',function(S,Calendar){
    // use Calendar
});

Hint

如无必要,推荐使用 gallery/calendar

Class

Attributes

Class Detail

class calendar.Calendar
Calendar (trigger,config)
Parameters:
  • trigger (String|HTMLDOMNode|KISSY.Node) – 配置项, 触点/容器id .
  • config (Object) – 配置项, 详细见下方 Configs Detail .

Configs Detail

calendar.date

{Date} - 可选, 该日期所在月份, 默认为当天

calendar.selected

{Date} - 可选, 当前选中的日期

calendar.startDay

{Number} - 可选, 日历显示星期x为起始日期, 取值范围为0到6, 默认为0,从星期日开始,若取值为1, 则从星期一开始, 若取值为7, 则从周日开始

calendar.pages

{Number} - 可选, 日历的页数, 默认为1, 包含一页日历

calendar.closable

{Boolean} - 可选, 在弹出情况下, 点选日期后是否关闭日历, 默认为false

calendar.rangeSelect

{Boolean} - 可选, 是否支持时间段选择,只有开启时候才会触发rangeSelect事件

calendar.range

{Object} - 可选, 默认显示的选择范围, 格式为:{start:s,end:n}

calendar.minDate

{Date} - 可选, 日历可选择的最小日期, 默认不开启

calendar.maxDate

{Date} - 可选, 日历可选择的最大, 默认不开启

calendar.multiSelect

{Boolean} - 可选, 是否支持多选, 默认不开启,只有开启时候才会触发multiSelect事件

calendar.navigator

{Boolean} - 可选, 是否可以通过点击导航输入日期, 默认开启

calendar.popup

{Boolean} - 可选, 日历是否为弹出,默认为false, 不开启

calendar.showTime

{Boolean} - 可选, 是否显示时间的选择,默认为false, 不开启

calendar.triggerType

{Array | String} - 可选, 弹出状态下, 触发弹出日历的事件, 例如:[‘click’,’focus’],也可以直接传入’focus’, 默认为[‘click’]

calendar.disabled

{Array} - 可选, 禁止点击的日期数组[new Date(),new Date(2011,11,26)]

calendar.align

{Object} - 可选, 日历和trigger对齐方式,默认{points:[‘bl’,’tl’],offset:[0,0]}

calendar.notLimited

{Boolean} - 可选, 是否出现不限的按钮,默认为false不开启,开启后点击触发select事件

calendar.rangLinkage

{Boolean} - 可选, 是多个日历是否联动,默认为true, 开启

Methods Detail

calendar.toggle()
toggle ()
切换日历的状态, 从显示到隐藏和从隐藏到显示
calendar.render()
render (config)
通过render可以带入如上任意参数并重新渲染日历
Parameters:config (Object) – 配置项, 详细见上方 Configs Detail
KISSY.use('calendar',function(S,Calendar) {
        c = new Calendar('#J_WithTime');
        c.render({maxDate:new Date()});
});
calendar.destroy()
destroy ()
销毁日历
calendar.hide()
hide ()
如果日历是弹出形式, 隐藏日历
calendar.show()
show ()
显示日历

Events Detail

calendar.select()
select ()
选中一个日期事件,通过e.date来获得选中的日期,如果开启notLimited参数,则e.date=null
calendar.monthChange()
monthChange ()
切换月份事件,通过e.date来获取切换到的日期, 通过e.date.getMonth() + 1 来获得切换至的月份
KISSY.use('calendar',function(S,Calendar) {
    //月份切换事件
    new Calendar('J_AllEvents').on('switch',function(e){
        alert('切换事件,月份切换到'+(e.date.getMonth()+1));
    });
});
calendar.rangeSelect()
rangeSelect (e)
范围选择事件,通过e.start和e.end来获得开始和结束日期
Parameters:e (Object) – 默认对象
KISSY.use('calendar',function(S,Calendar) {
    //选择范围,并绑定范围回调
    new Calendar('J_Range',{
        multi_page:2,
        rangeSelect:true
    }).on('rangeselect',function(e){
        alert(e.start+' '+e.end);
    });
});
calendar.multiSelect()
multiSelect (e)
多选触发的事件,通过e.multi来获取选中的日期数组
param Object e:默认对象
KISSY.use('calendar',function(S,Calendar) {
        new Calendar('#J_Popup23', {
                popup:true,
                triggerType:['click'],
                pages:2,
                multiSelect:true,
                rangeLinkage:false
        }).on('multiSelect', function(e) {
                alert(e.multi);
        });
});
calendar.timeSelect()
timeSelect (e)
确定选中时间事件,通过e.date来获得日期时间