两个el-date-picker进行互相关联:
要求初始化的时候起始时间和结束时间都应该大于今天的时间,当选择起始时间后结束时间要大于起始时间,当选择结束时间后,起始时间要小于结束时间大于今日时间:
注意:尽量把组件自带的“此刻”通过css样式隐藏掉
示例是vue2中使用的:
// HTML
<template>
<span class="label-name">封锁起始时间:</span>
<el-date-picker
v-model="form.startTime"
placeholder="请选择..."
size="mini"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="startTimeOptions"
@change="changeDateTime"
/>
<span class="label-name">封锁结束时间:</span>
<el-date-picker
v-model="form.endTime"
placeholder="请选择..."
size="mini"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="endTimeOptions"
@change="changeDateTime"
/>
</template>
// script
<script>
data() {
return {
startTimeOptions: {
disabledDate: (time) => {
return time.getTime() < Date.now() - 86400000
}
},
endTimeOptions: {
disabledDate: (time) => {
return time.getTime() < Date.now() - 86400000
}
}
}
},
methods: {
changeDateTime() {
// 因为startTime和endTime格式为 年-月-日 时:分:秒, 所以这里先把startTime和endTime转换为时间戳再进行比较
const startTime = new Date(this.form.startTime).getTime()
const endTime = new Date(this.form.endTime).getTime()
this.startTimeOptions = {
disabledDate: (time) => {
if (endTime !== 0) {
return time.getTime() > endTime || time.getTime() < Date.now() - 86400000
} else {
return time.getTime() < Date.now() - 86400000
}
}
}
this.endTimeOptions = {
disabledDate: (time) => {
if (startTime !== 0) {
return time.getTime() < startTime
} else {
return time.getTime() < Date.now() - 86400000
}
}
}
}
}
</script>
参考链接:https://blog.csdn.net/weixin_29344615/article/details/103465089