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

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.

# `date_picker`

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`

```elixir
@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`

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`

---

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