Skip to content

Kirby 3.7.5

Time field

<k-time-field>

Form field to handle a time value. Have a look at <k-field>, <k-input> and <k-time-input> for additional information.

<k-time-field v-model="time" name="time" label="Time" />

Props

Prop Type Default Description
after
string
–
autofocus
boolean
–
before
string
–
counter
boolean|object
–
disabled
boolean
–
display
string
Supported values:
HH, H, hh, h, mm, m, ss, s, a
"HH:mm"
Format to parse and display the time
Example:
hh:mm a
endpoints
object
–
help
string
–
icon
string
"clock"
Icon used for the input (and times dropdown)
input
string|number
–
invalid
boolean
–
label
string
–
max
string
–
The last allowed time as ISO time string
Example:
22:30:00
min
string
–
The first allowed time as ISO time string
Example:
01:30:00
name
number|string
–
novalidate
boolean
false
required
boolean
–
step
object
{ size: 5, unit: "minute" }
Rounding to the nearest step. Requires an object with a unit and a size key
Example:
{ unit: 'second', size: 15 }
theme
string
–
times
boolean
true
Deactivate the times dropdown or not
translate
boolean
–
type
string
"time"
value
string
null
Value must be provided as ISO time string
Example:
22:33:00

Methods

Method Parameters Description
focus – Focuses the input element

Events

Event Description Passes
blur
–
focus
–
input
–

Slots

Slot Description
after
before
counter
default
footer
header
help
icon
label
options

CSS classes

.k-time-field