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; } } },