4dkankan-components/docs/examples/time-picker/basic-range.vue

<template>
    <div class="example-basic">
        <el-time-picker v-model="value1" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="Arbitrary time" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(new Date(2016, 9, 10, 18, 30))

const makeRange = (start: number, end: number) => {
    const result: number[] = []
    for (let i = start; i <= end; i++) {
        result.push(i)
    }
    return result
}
const disabledHours = () => {
    return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
    if (hour === 17) {
        return makeRange(0, 29)
    }
    if (hour === 18) {
        return makeRange(31, 59)
    }
}
const disabledSeconds = (hour: number, minute: number) => {
    if (hour === 18 && minute === 30) {
        return makeRange(1, 59)
    }
}
</script>

<style>
.example-basic .el-date-editor {
    margin: 8px;
}
</style>