element中el-date-picker

<el-form-item label="报名截止时间" required style="width: 584px;">
<el-form-item prop="deadline">
<el-date-picker v-model="addForm.deadline" type="date" size="medium" placeholder="选择日期" :picker-options="pickerDeadline">
</el-date-picker>
</el-form-item>
</el-form-item>

<el-form-item label="活动时间" required style="width: 584px;">
<el-col :span="11">
<el-form-item prop="beginTime">
<el-date-picker v-model="addForm.beginTime" type="date" size="medium" placeholder="选择日期" :picker-options="pickerBeginDateBefore"
@change="changeTime">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="2" style="text-align: center;">--</el-col>
<el-col :span="11">
<el-form-item prop="endTime">
<el-date-picker v-model="addForm.endTime" type="date" size="medium" placeholder="选择日期" :picker-options="pickerBeginDateAfter">
</el-date-picker>
</el-form-item>
</el-col>
</el-form-item>

export default {

data() {

return {

//截止时间
pickerDeadline: {
disabledDate: (time) => {
let beginDateVal = this.addForm.beginTime;
if (beginDateVal) {
return time.getTime() > beginDateVal || time.getTime() < Date.now();
} else {
return time.getTime() < Date.now();
}
},
},

//开始时间
pickerBeginDateBefore: {
disabledDate: (time) => {
let endDateVal = this.addForm.endTime;
let deadline = this.addForm.deadline;
if (endDateVal) {
return time.getTime() > endDateVal;
} else {
return time.getTime() < deadline;
}

}
},
// 结束时间
pickerBeginDateAfter: {
disabledDate: (time) => {
let beginDateVal = this.addForm.beginTime;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
},

}

}

}，

methods: {

changeTime(date) {
this.pickerBeginDateAfter = {
disabledDate(time) { //开始时间-结束时间
return (time.getTime() < new Date(date).getTime());
}
}
},

}

实现活动结束时间不能小于开始时间，报名截止时间不能小于当前时间 不能大于活动开始时间