代码演示

基本形式

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

日期时间选择

<div class="f-cb">
<ui.form>
    <form.item cols=4>
        <date.picker showTime date={date1} />
    </form.item>
    <form.item cols=4>
        <date.picker showTime date={date2} />
    </form.item>
</ui.form>
</div>
var component = new NEKUI.Component({
    template: template,
    data: {
        date1: 1481287269287,
        date2: '2016-12-09 09:03'
    }
});

禁用组件

<date.picker disabled />

日期范围

<div class="f-cb">
    <date.picker minDate={minDate} maxDate={maxDate} class="g-col g-col-6" />
    <date.picker minDate="2008-08-08" maxDate="2008-08-16" class="g-col g-col-6" />
</div>
var component = new NEKUI.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">
    <date.picker date={date} class="g-col g-col-6" />
    <date.picker date={date} class="g-col g-col-6" />
</div>
<p>当前选择的日期为：{date | format: 'yyyy-MM-dd'}</p>

事件

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

<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

DatePicker

Members

Dropdown

DatePicker 日期选择

Functions

config()
select(date) 选择一个日期(date) ⇒ void
isOutOfRange(date) 是否超出规定的日期时间范围(date) ⇒ boolean | Date

Events

“change 日期时间改变时触发”
“select 选择某一项时触发”

DatePicker

Kind: global class
Extend: Dropdown

new DatePicker()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.date] object <=> 当前选择的日期时间
[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

DatePicker 日期选择

Kind: global variable

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

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

Kind: global function
Access: public

Param Type Description
date Date 选择的日期

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 改变后的日期时间

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
date object 当前选择项
← 复选组 表单项 →
想让文档更完善？ 来 GitHub 提个 PR 吧！