Calendar
提供图形化的日历界面供用户选择日期与时间,提供简洁的接口供开发者输出自定义格式的时间。
Attributes
var cal = new Calendar({..attributes..});
element
trigger trigger 唤出日历的元素,可以是:
- 选择器
- element
- jQuery Object
event
triggerType 唤出日历的事件,默认为 click
moment
focus 日历初始聚焦的日期,默认为今天。接受任何 moment 支持的参数,推荐使用 YYYY-MM-DD
格式。
string
format 输出日期格式,默认为 YYYY-MM-DD
overlay.align
align 同 Overlay 的设置,一般不用处理,如需了解详情,请参考 arale.position 的 pin 方法。
基本设置方法:
{
selfXY: [0, 0], // element 的定位点,默认为左上角
baseElement: Position.VIEWPORT, // 基准定位元素,默认为当前可视区域
baseXY: [0, 0] // 基准定位元素的定位点,默认为左上角
}
string|number
startDay 一周从哪一天开始,默认周日是一周的开始。
可使用数字 0-6,可使用 'Sun', 'Tue' 等简写,还可以使用 'Sunday', 'Thursday' 等全称。
array|function
range 设置可选范围,可接受数组与函数。例如 [startDate, endDate],其中 startDate 与 endDate 支持所有 moment 支持的写法。
推荐使用: ["2012-12-12", "2014-01-01"]
这种写法,方便阅读。
函数示例:
range: function(time) {
return time.day() > 1;
}
boolean
hideOnSelect 选择日期时日历自动隐藏,默认为 true
element
output 选择日期时自动填充到 output,默认 output 同 trigger。
Methods
一般情况下,你不需要使用下面的方法。
show()
显示日历。
hide()
隐藏日历。
disable()
禁用 trigger。
enable()
启用 trigger。
autohide()
当时 trigger 不是 input 时,调用此方法可自动隐藏日历。
focus(date)
焦点设置为指定时间。
cal.focus('2012-12-25');
range(range)
重新设置 range。
output(date)
将 date 填入 output 里。
Events
事件监听:
cal.on('..event..', function(param){
// do something
})
show
日历显示时。
hide
日历隐藏时。
moment
selectDate 当用户选择日期时。
.on('selectDate', function(date) {
// date is a moment instance
})
moment
selectMonth 当用户选择月份时。
.on('selectMonth', function(date) {
// date is a moment instance
})
moment
selectYear 当用户选择年份时。
.on('selectYear', function(date) {
// date is a moment instance
})
Developer API
Calendar 自身也是基于 Developer API 来实现的。
Calendar.DateColumn
日期表,见示例: date-column
Calendar.MonthColumn
月份表,见示例: month-column
Calendar.YearColumn
年份表,见示例: year-column
Calendar.BaseCalendar
基础日历。