Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案

实现的效果

 

?

1 2 3 4 5 6 7 8 9 10

<el-date-picker :disabled="!isEdit" v-model="scope.row.BeginDate"                                             type="date" format="yyyy-MM-dd" placeholder="选择日期" size="mini" style="width:150px;"                                             :picker-options="beginDatePicker(scope.$index)">                             </el-date-picker>                                                             <el-date-picker :disabled="!isEdit" v-model="scope.row.EndDate"                                             type="date" format="yyyy-MM-dd" placeholder="选择日期" size="mini" style="width:150px;"                                             :picker-options="endDatePicker(scope.$index)">                             </el-date-picker>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//methods方法里面： beginDatePicker: function (index) {                     const self = this                     return {                         disabledDate(time) {                             if (self.vmFormContent.OvertimeDetail[index].EndDate) {  //如果结束时间不为空，则小于结束时间                                 return new Date(self.vmFormContent.OvertimeDetail[index].EndDate).getTime() < time.getTime()                             } else {                                 //return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天                             }                         }                     }                 },                 endDatePicker: function (index) {                     const self = this                     return {                         disabledDate(time) {                             if (self.vmFormContent.OvertimeDetail[index].BeginDate) {  //如果开始时间不为空，则结束时间大于开始时间                                 return new Date(self.vmFormContent.OvertimeDetail[index].BeginDate).getTime() > time.getTime()                             } else {                                 //return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天                             }                         }                     }                 },