代码演示

基本形式

<jr-form>
    <jr-form-item cols=6>
        <jr-date-picker lang="en-US" />
    </jr-form-item>
    <jr-form-item cols=6>
        <jr-date-picker date="2008-08-08" />
    </jr-form-item>
</jr-form>

日期时间选择

<div class="f-cb">
<jr-form>
    <jr-form-item cols=3>
        <jr-date-picker showTime value={date1} />
    </jr-form-item>
    <jr-form-item cols=3>
        <jr-date-picker showTime date={date2} />
    </jr-form-item>
    <jr-form-item cols=3>
        <jr-date-picker showTime date={date3} />
    </jr-form-item>
</jr-form>
</div>
1、{date1}<br>
2、{date2}<br>
3、{date3}
var component = new JRUI.Component({
    template: template,
    data: {
        date1: 1481287269287,
        date2: '2016-12-09 09:03:02',
        date3: '2016/12/09 09:03:02'
    }
});

禁用组件

<jr-date-picker disabled />

日期范围

<div class="f-cb">
    <jr-date-picker minDate={minDate} maxDate={maxDate} class="g-col g-col-6" />
    <jr-date-picker minDate="2008-08-08" maxDate="2008-08-16" class="g-col g-col-6" />
</div>
var component = new JRUI.Component({
    template: template,
    data: {
        minDate: new Date(+new Date + 2*24*3600*1000),
        maxDate: new Date(+new Date + 7*24*3600*1000)
    }
});

数据绑定

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

事件

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

<jr-date-picker
    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

Classes

JRDatePicker

Constants

Dropdown

JRDatePicker 日期选择

Functions

config()
toggle(open) 展开/收起(open) ⇒ void
select(date) 选择一个日期(date) ⇒ void
current() 选择当前时间() ⇒ void
isOutOfRange(date) 是否超出规定的日期时间范围(date) ⇒ boolean | Date

Events

“change 日期时间改变时触发”
“toggle 展开/收起时触发”
“select 选择某一项时触发”

JRDatePicker

Kind: global class
Extend: Dropdown

new JRDatePicker()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.date] object <=> 当前选择的日期时间
[options.data.value] object <=> 当前选择的日期时间(经过格式化，优先级高于date)
[options.data.showTime] boolean false => 是否显示时间选择
[options.data.placeholder] string "'请输入'" => 文本框的占位文字
[options.data.minDate] Date | string => 最小日期时间，如果为空则不限制
[options.data.maxDate] Date | string => 最大日期时间，如果为空则不限制
[options.data.hideTip] boolean false => 是否显示校验错误信息
[options.data.autofocus] boolean false => 是否自动获得焦点
[options.data.required] boolean false => 是否必填
[options.data.readonly] boolean false => 是否只读
[options.data.disabled] boolean false => 是否禁用
[options.data.visible] boolean true => 是否显示
[options.data.size] string => 组件大小, sm/md/lg
[options.data.width] number => 组件宽度
[options.data.class] string => 补充class

JRDatePicker 日期选择

Kind: global constant

config()

Kind: global function
Access: protected

toggle(open) 展开/收起(open) ⇒ void

Kind: global function
Access: public

Param Type Description
open boolean 展开/收起状态。如果无此参数，则在两种状态之间切换。

select(date) 选择一个日期(date) ⇒ void

Kind: global function
Access: public

Param Type Description
date Date 选择的日期

current() 选择当前时间() ⇒ void

Kind: global function
Access: public

isOutOfRange(date) 是否超出规定的日期时间范围(date) ⇒ boolean | Date

Kind: global function
Returns: boolean | Date - date 如果没有超出日期时间范围，则返回false；如果超出日期时间范围，则返回范围边界的日期时间
Access: public

Param Type Description
date Date 待测的日期时间

“change 日期时间改变时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
date object 改变后的日期时间

“toggle 展开/收起时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
open object 展开/收起状态

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
date object 当前选择项
← 复选组 表单 →