日历 Calendar

示例

基本形式

<div class="g-row">
    <div class="g-col"><calendar /></div>
    <div class="g-col"><calendar date="2008-08-08" /></div>
</div>

禁用组件

<calendar disabled />

日期范围

<div class="g-row">
    <div class="g-col"><calendar minDate={minDate} maxDate={maxDate} /></div>
    <div class="g-col"><calendar minDate="2008-08-08" maxDate="2008-08-16" /></div>
</div>
<div class="g-row">
    <div class="g-col"><calendar ref="customCalendar" /></div>
</div>

var component = new RGUI.Component({
    template: template,
    data: {
        minDate: new Date(+new Date + 2*24*3600*1000),
        maxDate: new Date(+new Date + 7*24*3600*1000)
    },
    init: function() {
        // 只能选择星期一、三、五
        this.$refs.customCalendar.isOutOfRange = function(date) {
            return !(date.getDay()%2);
        }
        this.$refs.customCalendar.$update();
    }
});

数据绑定

<div class="g-row">
    <div class="g-col"><calendar date={date} /></div>
    <div class="g-col"><calendar date={date} /></div>
</div>
<p>当前选择的日期为：{date | format: 'yyyy-MM-dd'}</p>

var component = new RGUI.Component({
    template: template,
    data: {
        date: '2008-08-08'
    }
});

事件

请打开浏览器的控制台查看结果。

<calendar
    on-select={console.log('on-select:', '$event.date:', $event.date)}
    on-change={console.log('on-change:', '$event.date:', $event.date)} />

API

Class

Calendar

继承自Component。

Options

new Calendar()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.date`	Date string	`TODAY`	outer <=> inner	当前选择的日期
`data.minDate`	Date string	`null`	outer => inner	最小日期，如果为空则不限制
`data.maxDate`	Date string	`null`	outer => inner	最大日期，如果为空则不限制
`data.readonly`	boolean	`false`	outer => inner	是否只读
`data.disabled`	boolean	`false`	outer => inner	是否禁用
`data.visible`	boolean	`true`	outer => inner	是否显示
`data.class`	string	`''`	outer => inner	补充class

Methods

calendar.addYear(year)

调整年份

参数	类型	默认值	描述
`year`	number	`0`	加/减的年份
返回值	类型	描述
`date`	Date	计算后的日期

calendar.addMonth(month)

调整月份

参数	类型	默认值	描述
`month`	number	`0`	加/减的月份
返回值	类型	描述
`date`	Date	计算后的日期

calendar.select(date)

选择一个日期

参数	类型	默认值	描述
`date`	Date	`null`	选择的日期
返回值	类型	描述
无返回值

calendar.goToday()

回到今天

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

calendar.isOutOfRange(date)

是否超出规定的日期范围

参数	类型	默认值	描述
`date`	Date		待测的日期
返回值	类型	描述
`date`	boolean Date	如果没有超出日期范围，则返回false；如果超出日期范围，则返回范围边界的日期

Events

calendar.$on('change')

日期改变时触发

属性	类型	描述
`sender`	object	事件发送对象
`date`	object	改变后的日期

calendar.$on('select')

选择某一个日期时触发

属性	类型	描述
`sender`	object	事件发送对象
`date`	object	当前选择的日期