LanternUI.Components.DatetimeField (LanternUI v0.8.2)

Copy Markdown View Source

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

datetime_field(assigns)

Functions

datetime_field(assigns)

Attributes

  • id (:string) (required) - Stable DOM id for the datetime field hook.
  • name (:string) - omit for a non-submitting field (no name on the hidden input). Defaults to nil.
  • mode (:atom) - Which segment set to show: date, time, or both. Defaults to :date. Must be one of :date, :time, or :datetime.
  • precision (:atom) - Finest time segment shown; coarser parts stay zeroed. Defaults to :minute. Must be one of :minute, :second, or :millisecond.
  • value (:any) - canonical string (see value contract) or nil. Defaults to nil.
  • nullable (:boolean) - Allow clearing all segments to empty/null. Defaults to true.
  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.
  • form (:string) - the form attribute forwarded to the hidden input. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • suffix - trailing affix inside the field (e.g. the picker's toggle button).