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

实现的效果

 

<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>

　　

//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()//开始时间不选时，结束时间最大值小于等于当天
                            }
                        }
                    }
                },