vue.js + iview + DatePicker控件,时间区间选择

使用vue.js + iview + DatePicker控件,判断时间的区间选择

<template>
<div>
    <FormItem label="工作开始时间">
        <DatePicker class="list_width" style="width:280px;" :options="startTimeOptions" type="date" @on-change="startTimeChange" placeholder="选择工作开始时间" v-model="item.joinJobStartTimes"></DatePicker>
      </FormItem>
    </div>
    <div style="margin-left: 40px;">
      <FormItem label="工作结束时间">
        <DatePicker class="list_width" type="date" :options="endTimeOptions" style="width:280px;" @on-change="endTimeChange"  placeholder="选择工作结束时间" v-model="item.joinJobEndTimes"></DatePicker>
      </FormItem>
    </div>
</template>

return {
		 //开始日期设置
        startTimeOptions: {},
        //结束日期设置
        endTimeOptions: {}, 
        //开始日期model
        starttime: '', 
        //结束日期model
        endtime: '',
},
methods: {
	  //设置开始时间
      startTimeChange: function(e) { 
        debugger
        this.starttime = e;
        this.endTimeOptions = {
          disabledDate: date => {
            let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
            return date && (date.valueOf() < startTime) && startTime!='';
          }
        }
      },
      //设置结束时间
      endTimeChange: function(e) {
        debugger
        this.endtime = e;
        let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
        this.startTimeOptions = {
          disabledDate(date) {
            return date && date.valueOf() > endTime && endTime!='';
          }
        }
      },
}













  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值