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