日期选择 KLDatePicker

日期选择

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

禁用时/分/秒

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

数据绑定

通过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>

表单中使用

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

日期时间选择

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

禁用组件

通过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>

事件

日期时间选择组件支持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)} />

API

KLDatePicker

KLDatePicker

change 日期时间改变时触发Event

select 选择某一项时触发Event