Skip to content

Kirby 3.9.8

Date input

<k-date-input>

Form input to handle a date value. Component allows some degree of free input and parses the input value to a dayjs object. Supports rounding to a nearest step as well as keyboard interactions (altering value by arrow up/down, selecting of input parts via tab key).

<k-input v-model="date" type="date" name="date" />

Props

Prop Type Default Description
autofocus
boolean
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
id
number|string
function() { return this._uid; }
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
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 }
type
string
"date"
value
string
Value must be provided as ISO date string
Example:
2012-12-12

Methods

Method Parameters Description
focus Focuses the input element
select
  • Object part
Sets the cursor selection in the input element
that includes the provided part
selectFirst Selects the first pattern if available
selectLast Selects the last pattern if available
selectNext
  • Number index
Selects the next pattern if available
selectPrev
  • Number index
Selects the previous pattern if available

Events

Event Description Passes
focus
input
invalid
  • undefined
submit

CSS classes

.k-date-input