# `LineaUI.Components.TimePicker`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/time_picker.ex#L1)

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.

# `time_picker`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*