LineaUI.Components.TimePicker (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's time picker (flatpickr with no calendar): an input with a clock icon that opens flatpickr's hour and minute row, on a 12-hour clock with AM/PM or a 24-hour one, held inside a minimum and a maximum.

<.time_picker field={@form[:opens_at]} placeholder="Choose time..." />
<.time_picker name="alarm" time_24hr min_time="15:00" max_time="22:30" />
<.time_picker name="lunch" value="13:13" />

The form gets "HH:MM" (24-hour) through a hidden input named like the field, and every change fires a bubbling input event for phx-change. The popup is an overlay: LineaUI.open/close/toggle("id") work on it.

Summary

Functions

time_picker(assigns)

Renders a time input.

Functions

time_picker(assigns)

Renders a time input.

<.time_picker name="start" label="Start" minute_step={15} />

Events: on_change is pushed with %{"id" => id, "value" => "HH:MM"} after each change, 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 Time or "HH:MM".
  • 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.
  • 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) - Minutes added by the arrows and the arrow keys. Defaults to 5.
  • hour_step (:integer) - Defaults to 1.
  • default_hour (:integer) - The hour shown when the input is empty. Defaults to 12.
  • display_format (:string) - The text of the input in flatpickr tokens; H:i by default (h:i K for 12-hour text). Defaults to nil.
  • show_icon (:boolean) - 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 clock icon.
  • trailing - Buttons joined to the right of the input.