Kern 0.12.0 GitHub
Date & time

<kern-date-picker>

Date field with a calendar popover, form-associated. The value is an ISO date (2026-10-19); the field shows and accepts the locale's numeric format („19.10.2026“, also „19.10.“ or ISO). Typed text is applied on Enter or when leaving the field; invalid or out-of-range dates mark the field invalid.

Keyboard: Arrow Down or Alt+Arrow Down opens the calendar (keyboard as in kern-calendar), Enter or Space picks, Escape closes. Elements in the footer slot appear below the calendar; clicking one closes it.

Examples

Date field

The value is an ISO date (2026-10-19); the field shows and accepts the locale's format. Typed text is applied on Enter or when leaving the field. Arrow Down or Alt+Arrow Down opens the calendar, Enter or Space picks, Escape closes.

kernChange → …
<div style="display:grid;gap:16px;max-width:280px"> <kern-date-picker name="installed" label="Installed on" value="2026-03-14" locale="en-GB" clearable></kern-date-picker> <kern-date-picker label="Warranty until" value="2028-03-14" locale="de-CH" readonly></kern-date-picker> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div> root.querySelector('kern-date-picker').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + e.detail.value; });

Limits, disabled days and footer

min and max limit the range; the isDateDisabled property adds a rule, here no weekends. Dates outside show label-out-of-range. Buttons in the footer slot appear below the calendar; clicking one closes it.

Today
<div style="max-width:280px"> <kern-date-picker name="due" label="Maintenance on" required hint="Weekdays only" min="2026-10-01" max="2026-12-31" show-week-numbers locale="en-GB"> <kern-button slot="footer" size="sm" variant="ghost">Today</kern-button> </kern-date-picker> </div> const picker = root.querySelector('kern-date-picker'); picker.isDateDisabled = (iso) => [0, 6].includes(new Date(iso + 'T00:00').getDay()); root.querySelector('kern-button').addEventListener('click', () => { const d = new Date(); picker.value = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10); });

Properties

ariaLabelTextattribute aria-label-text
string | undefined

Accessible name when there is no visible label.

clearabledefault false
boolean

Show a button that empties the field.

disabledreflectsdefault false
boolean
error
string | undefined
firstDayOfWeekattribute first-day-of-week
number | undefined

0 = Sunday … 6 = Saturday; defaults to the locale.

hint
string | undefined
isDateDisabled
((iso: string) => boolean) | undefined

Additional rule for unselectable days, e.g. weekends.

label
string | undefined
labelClearattribute label-clear · default Clear · de Leeren
string | undefined
labelInvalidattribute label-invalid · default Not a valid date · de Kein gültiges Datum
string | undefined

Shown for text that is not a date.

labelOpenattribute label-open · default Open calendar · de Kalender öffnen
string | undefined
labelOutOfRangeattribute label-out-of-range · default Date not allowed · de Datum nicht erlaubt
string | undefined

Shown for a date outside min/max or disabled.

locale
string | undefined

BCP 47 locale; defaults to <html lang>, then the browser language.

max
string | undefined

Latest allowed date.

min
string | undefined

Earliest allowed date.

name
string | undefined
noImplicitSubmitattribute no-implicit-submit · default false
boolean

Enter does not submit the surrounding form.

placeholder
string | undefined

Defaults to the locale's format, e.g. „TT.MM.JJJJ“.

readonlydefault false
boolean
requireddefault false
boolean
showWeekNumbersattribute show-week-numbers · default false
boolean

ISO week numbers in the calendar.

sizereflectsdefault 'md'
"md" | "sm"
valuemutabledefault ''
string

ISO date YYYY-MM-DD, empty when none.

Events

kernChange
CustomEvent<{ value: string; }>

When the date changes (picked, typed and applied, or cleared).

Methods

hide()
hide() => Promise<void>

Closes the calendar.

setFocus()
setFocus() => Promise<void>
show()
show() => Promise<void>

Opens the calendar.

Slots

footer

Actions below the calendar, e.g. „Heute“

CSS parts

calendar

The popover panel

control

The field box