HTML部分:
<div class="userInfo annTit">
<el-form-item label="开始时间">
<el-date-picker type="datetime"
:clearable="false"
v-model="announcementForm.startDate"
autocomplete="off"
placeholder="请输入开始时间"
:picker-options="startDatePicker">
</el-date-picker>
</el-form-item>
</div>
<div class="userInfo annTit">
<el-form-item label="结束时间">
<el-date-picker type="datetime"
:clearable="false"
v-model="announcementForm.endDate"
autocomplete="off"
placeholder="请输入结束时间"
:picker-options="endDatePicker">
</el-date-picker>
</el-form-item>
</div>
JS部分
export default {
name: 'announcement',
data() {
return {
announcementForm: {
noticeTitle: '',
noticeContent: '',
startDate: '',
endDate: '',
state: 1
},
startDatePicker: this.beginDate(),//调用开始时间控制
endDatePicker: this.processDate(),//调用结束时间控制
}
},
components: {},
methods: {
beginDate() {
const self = this;
return {
disabledDate(time) {
if (self.announcementForm.endDate) { //如果结束时间不为空,则小于结束时间大于结束时间
return new Date(self.announcementForm.endDate).getTime() < time.getTime()||time.getTime() < Date.now() - 8.64e7;
} else {
//结束时间不选时,结束时间最大值小于等于当天
return time.getTime() < Date.now() - 8.64e7;
}
}
}
},
processDate() {
const self = this;
return {
disabledDate(time) {
if (self.announcementForm.startDate) { //如果开始时间不为空,则结束时间大于开始时间
return new Date(self.announcementForm.startDate).getTime() - 8.64e7 > time.getTime()
} else {
//开始时间不选时,结束时间最大值小于当天
return time.getTime() < Date.now() - 8.64e7;
}
}
}
},
}