日期选择 DatePicker

示例

基本形式

<datePicker />
<datePicker date="2008-08-08" />

禁用组件

<datePicker disabled />

日期范围

<datePicker minDate={minDate} maxDate={maxDate} />
<datePicker minDate="2008-08-08" maxDate="2008-08-16" />

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)
    }
});

数据绑定

<datePicker date={date} />
<datePicker date={date} />
<p>当前选择的日期为：{date | format: 'yyyy-MM-dd'}</p>

事件

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

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

API

Class

DatePicker

继承自Dropdown。

Options

new DatePicker()

参数类型默认值数据流向描述
dataobject绑定属性
data.dateobjectnullouter <=> inner当前选择的日期
data.placeholderstring'请输入'outer => inner文本框的占位文字
data.minDateDate
string		nullouter => inner最小日期，如果为空则不限制
data.maxDateDate
string		nullouter => inner最大日期，如果为空则不限制
data.autofocusbooleanfalseouter => inner是否自动获得焦点
data.readonlybooleanfalseouter => inner是否只读
data.disabledbooleanfalseouter => inner是否禁用
data.visiblebooleantrueouter => inner是否显示
data.classstring''outer => inner补充class

Methods

datePicker.select(date)

选择一个日期

参数类型默认值描述
dateDatenull选择的日期
返回值类型描述
无返回值

datePicker.isOutOfRange(date)

是否超出规定的日期范围

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

Inherited Methods

datePicker.toggle(open)

展开/收起

参数类型默认值描述
openboolean展开/收起状态。如果无此参数，则在两种状态之间切换。
返回值类型描述
无返回值

@override datePicker.select(item)

@deprecated datePicker.$updateSource()

从service中更新数据源

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

Events

datePicker.$on('change')

日期改变时触发

属性类型描述
senderobject事件发送对象
dateobject改变后的日期

datePicker.$on('select')

选择某一项时触发

属性类型描述
senderobject事件发送对象
dateobject当前选择项

Inherited Events

datePicker.$on('toggle')

展开/收起时触发

属性类型描述
senderobject事件发送对象
openobject展开/收起状态

@override datePicker.$on('select')