LanternUI.Components.DatePicker (LanternUI v0.8.2)

Copy Markdown View Source

Date/time pickers — Fluxon-compatible API composed from LanternUI primitives.

<.date_picker field={@form[:due]} label="Due date" />
<.date_time_picker field={@form[:starts_at]} precision={:millisecond} />
<.time_picker name="alarm" value="08:45:00.000" />
<.date_range_picker start_field={@form[:from]} end_field={@form[:to]} />

The public picker functions are date_picker/1 for a date, date_time_picker/1 for a date and time, time_picker/1 for a time-only field, and date_range_picker/1 for two date fields. canonical/2 is a support helper used to normalize picker values before rendering; it is not a component API.

The trigger is a segmented, directly-editable datetime_field (keyboard-first: type straight into the segments); the calendar popover is for mouse users and APG-grid keyboard navigation. time_picker is segments-only (no popover) — a LanternUI extension Fluxon doesn't offer.

Value contract

The hidden input submits the canonical string (YYYY-MM-DD, HH:MM:SS.mmm, YYYY-MM-DDTHH:MM:SS.mmm); empty = null. value accepts that string or a Date / Time / NaiveDateTime / DateTime struct.

Fluxon compatibility

Attrs mirror Fluxon's pickers: field/name/value, label, sublabel, description, help_text, errors, size, disabled, min/max, week_start, and the inner/outer_prefix/suffix slots. display_format / time_format are accepted for drop-in compatibility but not yet honored — v1 renders the fixed segmented US format (m/d/yyyy, h:mm AM).

Summary

Functions

date_picker(assigns)

Date-only picker (YYYY-MM-DD).

date_range_picker(assigns)

Start/end date range, bound to two form fields.

date_time_picker(assigns)

Date + time picker (YYYY-MM-DDTHH:MM:SS.mmm).

time_picker(assigns)

Time-only picker (HH:MM:SS.mmm, segments only — no popover).

Functions

date_picker(assigns)

Date-only picker (YYYY-MM-DD).

Attributes

  • id (:any) - Element id; derived from field when omitted. Defaults to nil.
  • label (:string) - Primary label above the control. Defaults to nil.
  • sublabel (:string) - Secondary label line under the primary label. Defaults to nil.
  • description (:string) - Helper text under the label stack. Defaults to nil.
  • help_text (:string) - Trailing help line under the field when no errors. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • size (:string) - Control density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.
  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.
  • value (:any) - Canonical date string or Date struct. Defaults to nil.
  • name (:any) - Form input name; derived from field when omitted. Defaults to nil.
  • errors (:list) - Validation messages; derived from field when used. Defaults to [].
  • min (:string) - ISO min date; earlier calendar days are disabled. Defaults to nil.
  • max (:string) - ISO max date; later calendar days are disabled. Defaults to nil.
  • week_start (:integer) - First weekday column; 0 is Sunday, 1 is Monday. Defaults to 0. Must be one of 0, 1, 2, 3, 4, 5, or 6.
  • display_format (:string) - accepted for Fluxon compat; not yet honored. Defaults to nil.
  • form (:string) - HTML form attribute forwarded to the hidden value input (for editors outside the form element). Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_prefix - Affix inside the control, before the segments.
  • outer_prefix - Affix outside the control, before the wrap.
  • inner_suffix - Affix inside the control, after the segments.
  • outer_suffix - Affix outside the control, after the wrap.

date_range_picker(assigns)

Start/end date range, bound to two form fields.

<.date_range_picker start_field={f[:from]} end_field={f[:to]} max={Date.utc_today()} />

Each end submits its own canonical YYYY-MM-DD value, so the range lives in two ordinary form fields rather than one parsed string.

Fluxon compatibility

Fluxon renders a range as ONE input driving a dual-month calendar; this composes two date_pickers instead. Same field contract and same attrs (start_field/end_field, min/max, label, size, disabled), so it is a drop-in at the call site, but the panel is per-field rather than a linked range calendar — picking a start does not constrain the end. navigation, placeholder, and display_format are accepted and ignored.

Attributes

  • id (:any) - Element id prefix; derived from the start field when nil. Defaults to nil.
  • label (:string) - Primary label above the pair. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • size (:string) - Control density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.
  • start_field (Phoenix.HTML.FormField) (required) - Form field for the range start.
  • end_field (Phoenix.HTML.FormField) (required) - Form field for the range end.
  • min (:any) - ISO string or Date; earlier days are disabled. Defaults to nil.
  • max (:any) - ISO string or Date; later days are disabled. Defaults to nil.
  • week_start (:integer) - First weekday column; 0 is Sunday, 1 is Monday. Defaults to 0. Must be one of 0, 1, 2, 3, 4, 5, or 6.
  • separator (:string) - Text rendered between the two controls. Defaults to "to".
  • navigation (:string) - accepted for Fluxon compat; not honored. Defaults to nil.
  • placeholder (:string) - accepted for Fluxon compat; not honored. Defaults to nil.
  • display_format (:string) - accepted for Fluxon compat; not honored. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

date_time_picker(assigns)

Date + time picker (YYYY-MM-DDTHH:MM:SS.mmm).

Attributes

  • id (:any) - Element id; derived from field when omitted. Defaults to nil.
  • label (:string) - Primary label above the control. Defaults to nil.
  • sublabel (:string) - Secondary label line under the primary label. Defaults to nil.
  • description (:string) - Helper text under the label stack. Defaults to nil.
  • help_text (:string) - Trailing help line under the field when no errors. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • size (:string) - Control density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.
  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.
  • value (:any) - Canonical datetime string or DateTime/NaiveDateTime. Defaults to nil.
  • name (:any) - Form input name; derived from field when omitted. Defaults to nil.
  • errors (:list) - Validation messages; derived from field when used. Defaults to [].
  • min (:string) - ISO min date; earlier calendar days are disabled. Defaults to nil.
  • max (:string) - ISO max date; later calendar days are disabled. Defaults to nil.
  • week_start (:integer) - First weekday column; 0 is Sunday, 1 is Monday. Defaults to 0. Must be one of 0, 1, 2, 3, 4, 5, or 6.
  • precision (:atom) - Finest time segment shown in the field. Defaults to :minute. Must be one of :minute, :second, or :millisecond.
  • display_format (:string) - accepted for Fluxon compat; not yet honored. Defaults to nil.
  • time_format (:string) - accepted for Fluxon compat; not yet honored. Defaults to nil.
  • form (:string) - HTML form attribute forwarded to the hidden value input (for editors outside the form element). Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_prefix - Affix inside the control, before the segments.
  • outer_prefix - Affix outside the control, before the wrap.
  • inner_suffix - Affix inside the control, after the segments.
  • outer_suffix - Affix outside the control, after the wrap.

time_picker(assigns)

Time-only picker (HH:MM:SS.mmm, segments only — no popover).

Attributes

  • id (:any) - Element id; derived from field when omitted. Defaults to nil.
  • label (:string) - Primary label above the control. Defaults to nil.
  • sublabel (:string) - Secondary label line under the primary label. Defaults to nil.
  • description (:string) - Helper text under the label stack. Defaults to nil.
  • help_text (:string) - Trailing help line under the field when no errors. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • size (:string) - Control density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.
  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.
  • value (:any) - Canonical time string or Time struct. Defaults to nil.
  • name (:any) - Form input name; derived from field when omitted. Defaults to nil.
  • errors (:list) - Validation messages; derived from field when used. Defaults to [].
  • precision (:atom) - Finest time segment shown in the field. Defaults to :minute. Must be one of :minute, :second, or :millisecond.
  • form (:string) - HTML form attribute forwarded to the hidden value input (for editors outside the form element). Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_prefix - Affix inside the control, before the segments.
  • outer_prefix - Affix outside the control, before the wrap.
  • inner_suffix - Affix inside the control, after the segments.
  • outer_suffix - Affix outside the control, after the wrap.