使用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!='';
          }
        }
      },
}













Logo

前往低代码交流专区

更多推荐