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