lantern

Forms & inputs

Date & time

Datetime field, calendar and date/time pickers.

Datetime field

Segmented, keyboard-first entry: type straight into a segment, ↑↓ to step, ←→ to move. Backs a hidden input with the canonical value.

Date mode

Canonical value is YYYY-MM-DD.

07 / 08 / 2026

Time mode

precision controls which segments appear (:minute, :second, :millisecond).

02 : 30 : 00 . 000 PM

Datetime mode

Combined date + time; canonical value is ISO-8601 local.

07 / 08 / 2026 , 02 : 30 : 00 . 000 PM

API reference

Props and slots, introspected from the component.

Prop Type Default Description
class any nil Extra classes merged onto the root element.
disabled boolean false Render disabled and non-interactive.
form string nil the form attribute forwarded to the hidden input
id* string — Stable DOM id for the datetime field hook.
mode date | time | datetime :date Which segment set to show: date, time, or both.
name string nil omit for a non-submitting field (no name on the hidden input)
nullable boolean true Allow clearing all segments to empty/null.
precision minute | second | millisecond :minute Finest time segment shown; coarser parts stay zeroed.
value any nil canonical string (see value contract) or nil
Slots
:suffix trailing affix inside the field (e.g. the picker's toggle button)

Calendar

APG-grid month calendar: arrow keys move by day/week, PgUp/PgDn by month, t jumps to today.

Basic

Selected day uses monochrome-primary fill; today gets a coral ring.

October 2026
SuMoTuWeThFrSa

Week start & min date

week_start is 0=Sunday … 6=Saturday; min disables earlier days.

July 2026
MoTuWeThFrSaSu

API reference

Props and slots, introspected from the component.

Prop Type Default Description
class any nil Extra classes merged onto the root element.
id* string — Stable DOM id (state is persisted per id).
max string nil ISO date; later days are disabled
min string nil ISO date; earlier days are disabled
month {:struct, Date} nil month to display; defaults to selected || today
selected {:struct, Date} nil Currently selected date; highlighted in the grid.
week_start 0 | 1 | 2 | 3 | 4 | 5 | 6 0 First weekday column; 0 is Sunday, 1 is Monday.

Date & time pickers

Fluxon-compatible API. Segmented trigger + calendar popover with a time pane (date_time_picker). time_picker is segments-only — a lantern-ui extension.

Date picker

Segmented date trigger with a calendar popover.

07 / 08 / 2026

Date-time picker

Calendar plus a time pane; precision controls the time segments.

07 / 08 / 2026 , 09 : 15 : 00 . 000 AM

Time picker

Segments-only time entry — a lantern-ui extension.

08 : 45 AM

Error state

Same error chrome as other form controls.

mm / dd / yyyy

can't be blank

Date range

Two ordinary form fields compose a start and end date range.

08 / 01 / 2026
to
08 / 07 / 2026

API reference

Props and slots, introspected from the component.

date_picker/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
display_format string nil accepted for Fluxon compat; not yet honored
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
form string nil HTML form attribute forwarded to the hidden value input (for editors outside the form element)
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
max string nil ISO max date; later calendar days are disabled.
min string nil ISO min date; earlier calendar days are disabled.
name any nil Form input name; derived from field when omitted.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
value any nil Canonical date string or Date struct.
week_start 0 | 1 | 2 | 3 | 4 | 5 | 6 0 First weekday column; 0 is Sunday, 1 is Monday.
Slots
:inner_prefix Affix inside the control, before the segments.
:inner_suffix Affix inside the control, after the segments.
:outer_prefix Affix outside the control, before the wrap.
:outer_suffix Affix outside the control, after the wrap.
date_time_picker/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
display_format string nil accepted for Fluxon compat; not yet honored
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
form string nil HTML form attribute forwarded to the hidden value input (for editors outside the form element)
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
max string nil ISO max date; later calendar days are disabled.
min string nil ISO min date; earlier calendar days are disabled.
name any nil Form input name; derived from field when omitted.
precision minute | second | millisecond :minute Finest time segment shown in the field.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
time_format string nil accepted for Fluxon compat; not yet honored
value any nil Canonical datetime string or DateTime/NaiveDateTime.
week_start 0 | 1 | 2 | 3 | 4 | 5 | 6 0 First weekday column; 0 is Sunday, 1 is Monday.
Slots
:inner_prefix Affix inside the control, before the segments.
:inner_suffix Affix inside the control, after the segments.
:outer_prefix Affix outside the control, before the wrap.
:outer_suffix Affix outside the control, after the wrap.
time_picker/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
form string nil HTML form attribute forwarded to the hidden value input (for editors outside the form element)
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
name any nil Form input name; derived from field when omitted.
precision minute | second | millisecond :minute Finest time segment shown in the field.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
value any nil Canonical time string or Time struct.
Slots
:inner_prefix Affix inside the control, before the segments.
:inner_suffix Affix inside the control, after the segments.
:outer_prefix Affix outside the control, before the wrap.
:outer_suffix Affix outside the control, after the wrap.
date_range_picker/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
disabled boolean false Render disabled and non-interactive.
display_format string nil accepted for Fluxon compat; not honored
end_field* {:struct, Phoenix.HTML.FormField} — Form field for the range end.
id any nil Element id prefix; derived from the start field when nil.
label string nil Primary label above the pair.
max any nil ISO string or Date; later days are disabled.
min any nil ISO string or Date; earlier days are disabled.
navigation string nil accepted for Fluxon compat; not honored
placeholder string nil accepted for Fluxon compat; not honored
separator string "to" Text rendered between the two controls.
size xs | sm | md | lg | xl "md" Control density / type scale.
start_field* {:struct, Phoenix.HTML.FormField} — Form field for the range start.
week_start 0 | 1 | 2 | 3 | 4 | 5 | 6 0 First weekday column; 0 is Sunday, 1 is Monday.