代码演示

基本形式

日期选择 date.picker - 图1

  1. <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>

日期时间选择

日期选择 date.picker - 图2

  1. <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>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            date1: 1481287269287,
            date2: '2016-12-09 09:03'
        }
    });

禁用组件

日期选择 date.picker - 图3

  1. <date.picker disabled />

日期范围

日期选择 date.picker - 图4

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

数据绑定

日期选择 date.picker - 图5

  1. <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 - 图6

  1. <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

Members

DatePicker 日期选择

Functions

Events

DatePicker

Kind: global classExtend: Dropdown

new DatePicker()

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

Dropdown

DatePicker 日期选择

Kind: global variable

Author: sensen(rainforest92@126.com)

config()

Kind: global functionAccess: protected

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

Kind: global functionAccess: public

ParamTypeDescription
dateDate选择的日期

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

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

ParamTypeDescription
dateDate待测的日期时间

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

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
dateobject改变后的日期时间

“select 选择某一项时触发”

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
dateobject当前选择项