Vue iview時間組件DatePicker，設置開始時間和結束時間約束

html模板代碼：

<!-- 開始時間 -->
<FormItem prop="startTime" label="開始時間：">
<DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" v-model="form.startTime" placeholder="請選擇時間"></DatePicker>
</FormItem>

<!-- 到期時間 -->
<FormItem prop="endTime" label="到期時間：">
<DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" v-model="form.endTime" placeholder="請選擇時間"></DatePicker>
</FormItem>

js代碼：

// 開始時間
startTimeChange: function(e) {
this.starttime = e;
this.endTimeOptions = {
disabledDate: date =>{
let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
return date && (date.valueOf() < startTime);
}
}
},
// 結束時間
endTimeChange: function(e) {
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;
}
}
},