Skip to content

Kirby 3.9.8

Search
    Search by Algolia

    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