Skip to content
目录

Time Select

Select time from a fixed-step list.

Basic

html
<template>
  <dk-time-select v-model="value" start="09:00" end="18:00" step="00:30" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>
展开

Props

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring''
startstartstring'09:00'
endendstring'18:00'
stepstepstring'00:30'
min-timeminimum selectable timestring''
max-timemaximum selectable timestring''
disabled-hoursdisable hours options() => number[]
disabled-minutesdisable minutes options(hour: number) => number[]
disabled-secondsdisable seconds options(hour: number, minute: number) => number[]
disableddisabledbooleanfalse
editablewhether the input is editablebooleantrue
clearableclearablebooleantrue
placeholderplaceholderstring''
namenative input name attributestring''
idnative input id attributestring''

Events

NameDescriptionParams
update:modelValuev-model update(value: string)
changechange(value: string)
clearclear-
focustriggered when input gets focus(evt: FocusEvent)
blurtriggered when input loses focus(evt: FocusEvent)

Exposes

NameDescription
focusfocus the input
blurblur the input