效果
点击开始时间之后,选择结束时间,前面的时间都置灰

页面
<el-form-item label="上传时间:"> <div style="line-height: 28px"> <el-date-picker v-model="queryForm.createTimeStart" size="small" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间" :picker-options="pickerOptionsStart" ></el-date-picker > - <el-date-picker v-model="queryForm.createTimeEnd" size="small" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间" :picker-options="pickerOptionsEnd" ></el-date-picker> </div> </el-form-item>
data中定义
pickerOptionsStart: { disabledDate: (time) => { let endDateVal = this.queryForm.createTimeEnd; if (endDateVal) { return time.getTime() > new Date(endDateVal).getTime(); } }, }, pickerOptionsEnd: { disabledDate: (time) => { let beginDateVal = this.queryForm.createTimeStart; if (beginDateVal) { return time.getTime() < new Date(beginDateVal).getTime(); } }, },