文章目录
- 实现代码
- 方式1:当选中日期的时候去更新一次。
- 方式2: 优化版本,使用 setTimout 每分钟更新一次。(防止选中日期之后过了很久再去选择时分秒时没有根据当前时间去改变)
el-datepicker 选择器禁用未来日期,动态禁用 时分秒;
秒 这一列的选项没有禁用的样式 可以随便选,
但是 点击确定后时间会更新到限制的那个时间(选中日期的那一刻)。
实现代码
方式1:当选中日期的时候去更新一次。
<template>
<div class="hello">
<el-date-picker
v-model="time"
type="datetime"
:picker-options="{
disabledDate(time) {
const nowTime = new Date()
return new Date(time).getTime() > nowTime.getTime()
},
selectableRange
}"
></el-date-picker>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
time: ''
}
},
computed: {
selectableRange() {
const nowTime = new Date()
const isSame = new Date(this.time).toLocaleDateString() === nowTime.toLocaleDateString()
if (isSame) {
return `00:00:00-${nowTime.getHours()}:${nowTime.getMinutes()}:${nowTime.getSeconds()}`
}
return '00:00:00-23:59:59'
}
}
}
</script>
方式2: 优化版本,使用 setTimout 每分钟更新一次。(防止选中日期之后过了很久再去选择时分秒时没有根据当前时间去改变)
<template>
<div class="hello">
<el-date-picker
v-model="time"
type="datetime"
:picker-options="{
disabledDate(time) {
const nowTime = new Date()
return new Date(time).getTime() > nowTime.getTime()
},
selectableRange
}"
@change="changeDate"
></el-date-picker>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
time: '',
selectableRange: '00:00:00-23:59:59',
timer: null
}
},
watch: {
time(newTime, oldTime) {
const sameDay = new Date(newTime).toLocaleDateString() === new Date(oldTime).toLocaleDateString()
if (sameDay) return
this.updateSelectableRange()
}
},
methods: {
updateSelectableRange() {
const nowTime = new Date()
const isSame = new Date(this.time).toLocaleDateString() === nowTime.toLocaleDateString()
this.clearTimer()
if (isSame) {
this.selectableRange = `00:00:00-${nowTime.getHours()}:${nowTime.getMinutes()}:${nowTime.getSeconds()}`
const delay = 60 - nowTime.getSeconds()
this.timer = setTimeout(() => {
this.updateSelectableRange()
}, delay * 1000)
return
}
this.selectableRange = '00:00:00-23:59:59'
},
clearTimer() {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
},
changeDate() {
this.clearTimer()
}
}
}
</script>