Two el-date-pickers are related to each other:
It is required that the start time and end time should be greater than today's time during initialization. When the start time is selected, the end time It must be greater than the start time. When the end time is selected, the start time must be less than the end time and greater than today's time:
注意：尽量把组件自带的“此刻”通过css样式隐藏掉
Example is used in 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>
Reference link: https://blog.csdn.net/weixin_29344615/article/details/103465089