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()//開始時間不選時，結束時間最大值小於等於當天
                            }
                        }
                    }
                },