<template> <el-form :model="project"> <el-form-item> <el-col :span="11"> <el-date-picker size="mini" v-model="project.planDateSta" value-format="yyyy-MM-dd" type="data" placeholder="开始日期" autocomplete="off" style="width: 100%" // data中调用 :picker-options="pickerOptionsStart" ></el-date-picker> </el-col> <el-col style="text-align: center" :span="2">-</el-col> <el-col :span="11"> <el-date-picker size="mini" v-model="project.planDateEnd" value-format="yyyy-MM-dd" type="data" align="right" placeholder="结束日期" autocomplete="off" style="width: 100%" :picker-options="pickerOptionsEnd" ></el-date-picker> </el-col> </el-form-item> </el-form> </template> <script> export default { data() { return { // 开始日期 :picker-options 中引用 pickerOptionsStart: { disabledDate: time => { // 获取结束日期的 v-model 值并赋值给新定义的对象 let endDateVal = this.project.planDateEnd; if (endDateVal) { // 比较 距 1970 年 1 月 1 日之间的毫秒数: return time.getTime() > new Date(endDateVal).getTime(); } } }, // 结束日期 :picker-options 中引用 pickerOptionsEnd: { disabledDate: time => { // 获取开始日期的 v-model 值并赋值给新定义的对象 let beginDateVal = this.project.planDateSta; if (beginDateVal) { // 比较 距 1970 年 1 月 1 日之间的毫秒数: return time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000 } } } } } } </script>