LineaUI.Components.DatePicker (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's date pickers (flatpickr's calendar in LineOne's skin): one date, several dates or a range, with limits, disabled days, a custom text format, a time row, and a calendar that pops under the input or stays inline.

<.date_picker field={@form[:due_on]} placeholder="Choose date..." />
<.date_picker name="trip" mode="range" value={{~D[2026-10-10], ~D[2026-10-20]}} />
<.date_picker name="days" mode="multiple" disabled_weekdays={[0, 6]} week_start={1} />
<.datetime_picker field={@form[:starts_at]} min_time="16:00" max_time="22:00" />
<.date_picker name="due" display_format="M j, Y" show_icon={false} placeholder="Due date" />

The input shows the date in display_format (flatpickr tokens: Y-m-d, F j, Y, H:i...); the form gets ISO text through hidden inputs named like the field: 2026-10-23 (one date), 2026-10-23 16:30 (date and time), and name[] per date for multiple and range (with an empty name[] first so an empty choice still reaches the server). A pick fires a bubbling input event, so phx-change runs; the server re-rendering the same value changes nothing, a different value replaces the one in the browser.

The calendar is an overlay: LineaUI.open/close/toggle("id") work on it, and date_picker_clear/1 empties it.

Summary

Functions

date_picker(assigns)

Renders a date input with its calendar.

date_picker_clear(js \\ %JS{}, id)

A %JS{} that empties the picker with id, for a clear button.

datetime_picker(assigns)

Renders a date and time input: the calendar with flatpickr's hour and minute row.

Functions

date_picker(assigns)

Renders a date input with its calendar.

<.date_picker id="due" name="due" label="Due" min={Date.utc_today()} />
<.date_picker id="when" name="when" placeholder="Choose date">
  <:trailing>
    <.button phx-click={LineaUI.toggle("when")}>…</.button>
    <.button phx-click={date_picker_clear("when")}>×</.button>
  </:trailing>
</.date_picker>

Events: on_change is pushed with %{"id" => id, "value" => value} after each pick, where value is the ISO text (or a list of them for multiple and range), to target or to the LiveView/LiveComponent the picker is in.

Attributes

  • id (:string) - Defaults to the field id, or a generated one.
  • name (:string) - Defaults to the field name.
  • value (:any) - A Date, ISO text, a list of them, {from, to} or a Date.Range.
  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • help (:string) - Defaults to nil.
  • errors (:list) - Defaults to [].
  • placeholder (:string) - Defaults to nil.
  • mode (:string) - Defaults to "single". Must be one of "single", "multiple", or "range".
  • min (:any) - The first day that can be picked (Date or ISO text). Defaults to nil.
  • max (:any) - The last day that can be picked. Defaults to nil.
  • disabled_dates (:list) - Days that cannot be picked. Defaults to [].
  • disabled_weekdays (:list) - Weekdays that cannot be picked, 0 = Sunday. Defaults to [].
  • week_start (:integer) - The first column of the calendar, 0 = Sunday. Defaults to 0.
  • display_format (:string) - The text of the input in flatpickr tokens; Y-m-d by default. M j, Y reads Oct 23, 2026, D, M j reads Fri, Oct 23, F j, Y reads October 23, 2026. Only the shown text changes: the form still gets ISO. Defaults to nil.
  • months (:list) - The twelve month names, for another language. Defaults to nil.
  • weekdays (:list) - The seven weekday names from Sunday; the calendar shows their first three letters. Defaults to nil.
  • today (:any) - The day marked as today; the server's UTC day by default. Defaults to nil.
  • inline (:boolean) - The calendar always shows, under the input. Defaults to false.
  • show_icon (:boolean) - The calendar icon inside the input; false leaves a bare input (and drops the left padding). Defaults to true.
  • disabled (:boolean) - Defaults to false.
  • on_change (:string) - Defaults to nil.
  • target (:any) - Defaults to nil.
  • class (:any) - Classes of the input. Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - Replaces the calendar icon.
  • trailing - Buttons joined to the right of the input (LineOne's External Elements); the icon is then left out.

date_picker_clear(js \\ %JS{}, id)

@spec date_picker_clear(Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.JS.t()

A %JS{} that empties the picker with id, for a clear button.

<.button phx-click={date_picker_clear("when")}>Clear</.button>

datetime_picker(assigns)

Renders a date and time input: the calendar with flatpickr's hour and minute row.

<.datetime_picker name="meeting" placeholder="Choose datetime..." min_time="16:00" max_time="22:00" />

Takes every attr of date_picker/1 (in single mode) and the time attrs below. The form gets 2026-10-23 16:30.

Attributes

  • id (:string) - Defaults to the field id, or a generated one.
  • name (:string) - Defaults to the field name.
  • value (:any) - A NaiveDateTime, DateTime or "2026-10-23 16:30".
  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • help (:string) - Defaults to nil.
  • errors (:list) - Defaults to [].
  • placeholder (:string) - Defaults to nil.
  • min (:any) - Defaults to nil.
  • max (:any) - Defaults to nil.
  • disabled_dates (:list) - Defaults to [].
  • disabled_weekdays (:list) - Defaults to [].
  • week_start (:integer) - Defaults to 0.
  • display_format (:string) - Y-m-d H:i by default. Defaults to nil.
  • months (:list) - Defaults to nil.
  • weekdays (:list) - Defaults to nil.
  • today (:any) - Defaults to nil.
  • inline (:boolean) - Defaults to false.
  • show_icon (:boolean) - Defaults to true.
  • time_24hr (:boolean) - Hours 0-23 instead of 1-12 with AM/PM. Defaults to false.
  • min_time (:string) - The earliest time, "HH:MM". Defaults to nil.
  • max_time (:string) - The latest time, "HH:MM". Defaults to nil.
  • minute_step (:integer) - Defaults to 5.
  • hour_step (:integer) - Defaults to 1.
  • default_hour (:integer) - The hour a first pick starts at. Defaults to 12.
  • disabled (:boolean) - Defaults to false.
  • on_change (:string) - Defaults to nil.
  • target (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon
  • trailing