A segmented, directly-editable date/time field — the trigger primitive the
date pickers compose (HeroUI-style: 2 / 3 / 2026, 8:45 AM).
<.datetime_field id="due" name="due" mode={:date} value="2026-02-03" />
<.datetime_field id="at" name="at" mode={:datetime} precision={:millisecond} value={nil} />Each segment (month/day/year/hour/minute/…) is individually editable: type
digits, step with ↑/↓ (wrapping), move with ←/→, clear with Backspace —
driven by the LanternDatetimeField hook, DOM-local.
Value contract (critical — lantern's Coercion depends on it)
A hidden <input name> carries the canonical value; the segments are
display sugar. Canonical strings per mode:
:date→YYYY-MM-DD:time→HH:MM:SS.mmm(24h):datetime→YYYY-MM-DDTHH:MM:SS.mmm
An empty hidden value means null (SQL NULL for lantern). Display shows a
12-hour clock with AM/PM; the canonical value is always 24h.
precision controls which time segments are shown/edited: :minute
(default), :second, or :millisecond. Unshown parts are carried as zeros
in the canonical value, so ms precision survives even at :minute display.
Summary
Functions
Attributes
id(:string) (required)name(:string) - omit for a non-submitting field (no name on the hidden input). Defaults tonil.mode(:atom) - Defaults to:date. Must be one of:date,:time, or:datetime.precision(:atom) - Defaults to:minute. Must be one of:minute,:second, or:millisecond.value(:any) - canonical string (see value contract) or nil. Defaults tonil.nullable(:boolean) - Defaults totrue.disabled(:boolean) - Defaults tofalse.form(:string) - the form attribute forwarded to the hidden input. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
suffix- trailing affix inside the field (e.g. the picker's toggle button).