← Back to Examples

⏱️ Time / Datetime Picker (v1.14–1.15)

picker-mode="time" and picker-mode="datetime" with four time-display UIs: rolls (default), clock, wheel, compact.

picker_mode="time | datetime" · time_display="rolls | clock | wheel | compact"

Time mode — defaults (HH:mm, 24h)

Pick a time

No selection yet

Time mode — 12-hour format with AM/PM

hh:mm a

No selection yet

Time mode — 15-minute step

time-step="15"

No selection yet

Time mode — with seconds

HH:mm:ss

No selection yet

Datetime mode — calendar + time side by side

YYYY-MM-DD HH:mm

No selection yet

Datetime mode — 12-hour with seconds

YYYY-MM-DD hh:mm:ss a

No selection yet

Datetime + range — should fall back to date range (console warning)

This combo is not supported in v1.14 — expect a warning

Selection logged here. Check console for a single fallback warning.

Datetime with initialDate — ISO datetime string

initial-date="2026-05-23T14:30:00"

Should display 2026-05-23 14:30 on first render

Clock face (v1.15) — `time-display="clock"`

Material-style two-step face: pick the hour, the dial flips to minutes. Click the HH or MM digit in the header to jump back.

Clock — h12 with AM/PM

time-display="clock" time-format-mask="hh:mm a"

No selection yet

Clock — h24 dual ring (outer 1-12, inner 13-24)

time-display="clock" (hour-cycle defaults to h24 with HH:mm)

Inner ring shows 13..24 with 24 at the top

Clock — 15-minute step (4 labels)

time-display="clock" time-step="15"

Minute face shows :00 :15 :30 :45 only

Clock — time-step="7" (non-divisor warning → falls back to 1)

time-display="clock" time-step="7" — check the console

60 % 7 !== 0 → console.warn fires; step becomes 1

Clock — datetime side-by-side

picker-mode="datetime" time-display="clock" hour-cycle="h12"

Calendar + clock face in one popover

Wheel barrel (v1.15) — `time-display="wheel"`

iOS UIPickerView aesthetic: snap-scrolling columns with a center selection band and top/bottom fade. Scroll a column or click any visible row to center it.

Wheel — defaults (HH:mm, 24h)

time-display="wheel"

No selection yet

Wheel — h12 with AM/PM

time-display="wheel" time-format-mask="hh:mm a"

No selection yet

Wheel — with seconds (HH:mm:ss)

time-display="wheel" time-format-mask="HH:mm:ss"

Wheel supports seconds (clock does not)

Wheel — 5-minute step

time-display="wheel" time-step="5"

Minute column shows :00 :05 :10 ... :55

Wheel — datetime side-by-side

picker-mode="datetime" time-display="wheel"

Calendar + wheel in one popover

Compact pills (v1.15) — `time-display="compact"`

iOS 14+ aesthetic: tap a pill to type a value. Enter commits, Escape reverts, ↑/↓ nudge by step. Calmest of the four time UIs.

Compact — defaults (HH:mm, 24h)

time-display="compact"

No selection yet — tap a pill and type

Compact — h12 with AM/PM

time-display="compact" time-format-mask="hh:mm a"

No selection yet

Compact — with seconds (HH:mm:ss)

time-display="compact" time-format-mask="HH:mm:ss"

Third pill appears for seconds

Compact — 15-minute step

time-display="compact" time-step="15" — typed value snaps to nearest multiple

Type :22 → commits to :15; arrow keys jump by 15

Compact — datetime side-by-side

picker-mode="datetime" time-display="compact" hour-cycle="h12"

Calendar + compact pills in one popover

🔌 Server round-trip

The LiveView server saw 0 event(s) from the wrapper.

(pick a date anywhere on this page)