Navigation

Calendar

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

Class

Properties

Class Detail

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

Config Attributes 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.navigator

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

calendar.popup

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

calendar.showTime

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

calendar.triggerType

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

Methods Detail

calendar.toggle()
toggle ()
切换日历的状态, 从显示到隐藏和从隐藏到显示
calendar.render()
render (config)
通过render可以带入如上任意参数并重新渲染日历
Parameters:config (Object) – 配置项, 详细见上方 Config Attributes 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.timeSelect()
timeSelect (e)
确定选中时间事件,通过e.date来获得日期时间

Navigation