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