Date & time

`<kern-time-picker>`

Time field with segments (hours, minutes, optional seconds and AM/PM), form-associated. The value is HH:mm (or HH:mm:ss with seconds), empty while a segment is missing.

Keyboard per segment: Arrow Up/Down change it (minutes in step), digits type it and move on, Arrow Left/Right switch segments, Backspace clears, A/P set AM/PM, Enter submits the surrounding form. With list, a button opens a list of times (every step, at least 5 minutes; every 30 minutes when step is smaller).

Examples

Time field

Segments for hours and minutes; the value is HH:mm. Per segment: Arrow Up/Down change it (minutes in step seconds), digits type it and move on, Arrow Left/Right switch segments, Backspace clears. locale decides 12- or 24-hour display unless hour12 is set.

kernChange → …

<div style="display:grid;gap:16px;max-width:240px"> <kern-time-picker name="on" label="Switch on at" value="06:30" locale="de-CH"></kern-time-picker> <kern-time-picker label="Switch off at" value="22:15" locale="en-US" hint="12-hour clock: A/P set AM/PM"></kern-time-picker> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

const out = root.querySelector('output'); for (const el of root.querySelectorAll('kern-time-picker')) { el.addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + e.detail.value)); }

List, limits and seconds

list adds a button with a list of times every step (here 900 s = 15 minutes). min and max limit the time. seconds adds a seconds segment (HH:mm:ss).

Properties

ariaLabelTextattribute aria-label-text

string | undefined

Accessible name when there is no visible label.

disabled

reflects

default false

boolean

error

string | undefined

hint

string | undefined

hour12attribute hour-1-2

boolean | undefined

12-hour clock with AM/PM; defaults to the locale.

label

string | undefined

labelHourattribute label-hour · default Hours · de Stunden

string | undefined

labelListattribute label-list · default Choose time · de Zeit wählen

string | undefined

labelMinuteattribute label-minute · default Minutes · de Minuten

string | undefined

labelOutOfRangeattribute label-out-of-range · default Time not allowed · de Zeit nicht erlaubt

string | undefined

Shown for a time outside min/max.

labelPeriodattribute label-period · default AM/PM · de Vormittag/Nachmittag

string | undefined

labelSecondattribute label-second · default Seconds · de Sekunden

string | undefined

listdefault false

boolean

Button with a list of times.

locale

string | undefined

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

max

string | undefined

Latest allowed time HH:mm.

min

string | undefined

Earliest allowed time HH:mm.

name

string | undefined

noImplicitSubmitattribute no-implicit-submit · default false

boolean

Enter does not submit the surrounding form.

readonlydefault false

boolean

requireddefault false

boolean

secondsdefault false

boolean

Seconds segment.

size

reflects

default 'md'

"md" | "sm"

stepdefault 60

number

Step in seconds for Arrow Up/Down and the list, like <input type="time"> (900 = 15 min).

value

mutable

default ''

string

HH:mm or HH:mm:ss, empty when none.

Events

kernChange

CustomEvent<{ value: string; }>

When the time changes (complete, or cleared).

Methods

hide()

hide() => Promise<void>

Closes the list.

setFocus()

setFocus() => Promise<void>

show()

show() => Promise<void>

Opens the list (with list).

CSS parts

control

The field box

listbox

The popover list