Skip to content

Kirby 3.9.8

Date field

<k-date-field>

Form field to handle a date/datetime value. Bundles k-date-input with k-calendar and, optionally, k-time-input with k-times. Have a look at <k-field>, <k-input> and <k-datetime-input> for additional information.

<k-date-field v-model="date" name="date" label="Date" />

Props

Prop Type Default Description
after
string
autofocus
boolean
before
string
calendar
boolean
true
Deactivate the calendar dropdown or not
counter
boolean|object
disabled
boolean
display
string
Supported values:
YYYY, YY, MM, M, DD, D
"DD.MM.YYYY"
Format to parse and display the date
Example:
MM/DD/YY
endpoints
object
help
string
icon
string
"calendar"
Icon used for the date input (and calendar dropdown)
id
number|string
function() { return this._uid; }
input
string|number
invalid
boolean
label
string
max
string
The last allowed date as ISO date string
Example:
2025-12-31
min
string
The first allowed date as ISO date string
Example:
2020-01-01
name
number|string
novalidate
boolean
false
required
boolean
step
object
{ size: 1, unit: "day" }
Rounding to the nearest step. Requires an object with a unit and a size key
Example:
{ unit: 'minute', size: 30 }
theme
string
time
boolean|object
function() { return {}; }
Time options (e.g. display, icon, step). Please check docs for k-time-input props.
Example:
{ display: 'HH:mm', step: { unit: "minute", size: 30 } }
times
boolean
true
Deactivate the times dropdown or not
translate
boolean
type
string
"date"
value
string
null
Value must be provided as ISO date string
Example:
2012-12-12

Methods

Method Parameters Description
focus Focuses the input element

Events

Event Description Passes
blur
focus
input
submit

Slots

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

CSS classes

.k-date-field