日期选择 KLDatePicker

日期选择

<kl-date-picker lang="en-US" date={selectDate} placeholder="选择日期" />
<p>当前选择的日期为：{selectDate}</p>
<p>格式化后的日期为：{selectDate | format: 'yyyy-MM-dd HH:mm:ss'}</p>

日期时间选择

<kl-date-picker lang="en-US" date={selectDate} placeholder="选择日期" showTime />
<p>当前选择的日期为: {selectDate}</p>
<p>格式化后的日期为: {selectDate | format: 'yyyy-MM-dd HH:mm:ss'}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        selectDate: null
    }
});

禁用时/分/秒

<p>禁用小时:</p>
<kl-date-picker lang="en-US" date={selectDate1} placeholder="请选择时间" showTime disabledHours />
<p>禁用分钟:</p>
<kl-date-picker lang="en-US" date={selectDate2} placeholder="请选择时间" showTime disabledMinutes />
<p>禁用秒:</p>
<kl-date-picker lang="en-US" date={selectDate3} placeholder="请选择时间" showTime disabledSeconds />

var component = new NEKUI.Component({
    template: template
});

禁用组件

通过disabled属性来设置组件是否可用

<kl-date-picker disabled />

只可读组件

通过readonly属性来设置组件是否值可读

<kl-date-picker date="2017-10-10" readonly />

日期范围

通过指定minDate 和maxDate来控制日期选择范围

<p>控制时间选择范围：如可选择2017-03-01 - 2017-12-30段内的时间</p>
<kl-date-picker minDate="2017-03-01" maxDate="2017-12-30" />
<p>选择时间范围：开始时间不能大于结束时间</p>
<kl-row>
    <kl-col span=6>
        <kl-date-picker maxDate={endTime} date={startTime} placeholder="开始时间"/>
    </kl-col>
    <kl-col span=6>
        <kl-date-picker minDate="{startTime}" date={endTime} placeholder="结束时间" />
    </kl-col>
</kl-row>

数据绑定

通过date属性来进行数据绑定

<kl-row>
    <kl-col span=6>
        <kl-date-picker date={date} />
    </kl-col>
    <kl-col span=6>
        <kl-date-picker date={date} readonly disabled=true />
    </kl-col>
</kl-row>
<p>当前选择的日期为：{date | format: 'yyyy-MM-dd'}</p>

事件

日期时间选择组件支持toggle、select和change事件

toggle：组件展开或收起的时候触发的事件
select：当选择日期的时候触发
change：当所学日期变换是触发的事件

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

<kl-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)} />

表单中使用

<kl-form ref="form">
    <kl-form-item title="开始时间" labelSize="70px" required >
        <kl-date-picker date={date} />
     </kl-form-item>
      <kl-button title="验证" on-click={this.validate()} />
</kl-form>

var component = new NEKUI.Component({
    template: template,
    validate: function() {
        var $form = this.$refs.form;
        return $form.validate().success;
    }
});

API

KLDatePicker

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.date]	`object`		<=> 当前选择的日期时间
[options.data.showTime]	`boolean`	`false`	=> 是否显示时间选择
[options.data.defaultTime]	`string`	`null`	=> 首次默认的时分秒, 格式为字符串”hh:mm:ss”
[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.disabledHours]	`boolean`	`false`	=> 是否禁用小时输入框
[options.data.disabledMinutes]	`boolean`	`false`	=> 是否禁用分钟输入框
[options.data.disabledSeconds]	`boolean`	`false`	=> 是否禁用秒输入框
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.size]	`string`		=> 组件大小, sm/md/lg
[options.data.width]	`number`		=> 组件宽度
[options.data.class]	`string`		=> 补充class

change 日期时间改变时触发Event

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

select 选择某一项时触发Event

Name	Type	Description
sender	`object`	事件发送对象
date	`object`	当前选择项