您可以使用 Element UI 的日期时间选择器的
disabledDate
属性来禁用特定的时间。该属性接受一个函数作为参数,该函数返回一个布尔值,指示是否禁用某个日期/时间。
以下是一个例子,演示如何禁用 Element UI 的日期时间选择器中的某些时间段:
<template>
<el-date-picker
v-model="value"
type="datetime"
:disabled-date="disabledDate"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
value: '',
disabledTimes: [
start: '09:00', // 禁用从 09:00 到 12:00 的时间段
end: '12:00'
start: '13:00', // 禁用从 13:00 到 18:00 的时间段
end: '18:00'
methods: {
disabledDate(time) {
const disabledTimes = this.disabledTimes
const disabled = disabledTimes.some((item) => {
const start = new Date(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${item.start}`)
const end = new Date(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${item.end}`)
return time >= start && time <= end
return disabled
</script>
在上面的代码中,我们使用 disabledTimes 数组来存储要禁用的时间段。disabledDate 方法检查是否有任何禁用的时间段包含选定的时间,如果是,则返回 true,否则返回 false。
希望这可以帮助您禁用 Element UI 的日期时间选择器中的时间。