在原版的时间段筛选，结束时间会覆盖原本选好的开始时间，也就是意味着用户本来只想修改结束时间，实际上却是必须对整个时间段重新筛选......
所以只好使用该组件的PickerOptions里的disabledDate来对单个时间组件（开始/结束）处理
<template> <div> <div> <el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> </div> <div> <el-date-picker v-model="value2" :picker-options="pickerOptions1" type="date" value-format="yyyy-MM-dd HH:mm:dd" placeholder="起始时间"> </el-date-picker> <el-date-picker v-model="value3" :picker-options="pickerOptions2" type="date" value-format="yyyy-MM-dd HH:mm:dd" placeholder="结束时间"> </el-date-picker> </div> <button @click="mountsTime"> 获取时间</button> </div></template><script>export default { data() { return { pickerOptions: { onPick({ maxDate, minDate }) { console.log(maxDate, minDate); } }, pickerOptions1: { disabledDate:time=> { return time.getTime() >new Date(this.value3); //4月29号前的都不能选 } }, pickerOptions2:{ disabledDate:time=>{ // console.log(this.value2) return time.getTime() <new Date(this.value2)-24 * 3600 * 1000 ;//5月15号后的都不能选 } }, value1: '', value2:'', value3:'' }; }, methods:{ mountsTime(){ console.log(this.value2,this.value3) } }};</script>
吐槽：这个代码模块为啥会变成一行o(▼皿▼メ;)o，还得截图~~
效果如下：
end~
