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 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
Example:unit and a size key { 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 |
|
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 |
|
Selects the next pattern if available |
| selectPrev |
|
Selects the previous pattern if available |
Events
| Event | Description | Passes |
|---|---|---|
| focus |
|
– |
| input |
|
– |
| invalid |
|
|
| submit |
|
– |
CSS classes
.k-date-input