日期时间选择 DateTimePicker

示例

基本形式

<dateTimePicker />
<dateTimePicker date="2012-12-21 12:21" />

禁用组件

<dateTimePicker disabled />

日期范围

<dateTimePicker minDate={minDate} maxDate={maxDate} />
<dateTimePicker minDate="2008-08-08 12:00" maxDate="2008-08-12 14:45" />

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

数据绑定

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

事件

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

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

API

Class

DateTimePicker

继承自Dropdown。

Options

new DateTimePicker()

参数类型默认值数据流向描述
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

dateTimePicker.isOutOfRange(date)

是否超出规定的日期时间范围

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

Inherited Methods

dateTimePicker.toggle(open)

展开/收起

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

@override dateTimePicker.select(item)

@deprecated dateTimePicker.$updateSource()

从service中更新数据源

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

Events

dateTimePicker.$on('change')

日期时间改变时触发

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

Inherited Events

dateTimePicker.$on('toggle')

展开/收起时触发

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

@override dateTimePicker.$on('select')