element-plus/docs/examples/time-picker/basic-range.vue
啝裳 ea90c4c148
docs: fix all style contamination (#5656)
* docs: fix all style contamination

* fix: update
2022-02-06 09:18:11 +08:00

49 lines
1003 B
Vue

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