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