<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());
}
}
},
}
實現活動結束時間不能小於開始時間，報名截止時間不能小於當前時間 不能大於活動開始時間