# `Localize.Inputs.Date.Components.DatePickerLive`
[🔗](https://github.com/elixir-localize/localize_datetime_inputs/blob/v0.1.1/lib/localize/inputs/date/components/date_picker_live.ex#L3)

Server-rendered date picker LiveComponent with full
multi-calendar grid support.

Where `<.date_input>` ships a Gregorian-structured grid
re-labelled via `Intl.DateTimeFormat`, this component
renders the grid **in the configured calendar's own
month structure** — Hebrew months span Hebrew month
boundaries, Islamic months wrap at the Islamic month
end, Persian Esfand has 29 or 30 days depending on the
33-year cycle, and so on. Calendar arithmetic delegates
to the Calendrical Calendar behaviour module (`Date.add/2`,
`Date.day_of_week/1`, `Date.days_in_month/1`).

Wire format on the form is the same as `<.date_input>`:
ISO-8601 (`YYYY-MM-DD`, Gregorian) via the embedded hidden
input. Server-side, parse with
`Localize.Inputs.Date.Parser.parse_date/2` or just read
`params[field]` directly.

## Usage

    <.live_component
      module={Localize.Inputs.Date.Components.DatePickerLive}
      id="event-date"
      form={@form}
      field={:date}
      calendar={:hebrew}
      locale={:"he-IL"}
    />

## Attributes

* `:id` — required, unique per LiveComponent instance.

* `:form` — the `Phoenix.HTML.Form` the field belongs to.

* `:field` — the form field as an atom.

* `:calendar` — a CLDR calendar key (`:gregorian`,
  `:hebrew`, `:islamic_civil`, `:islamic_umalqura`,
  `:persian`, `:japanese`, `:buddhist`, `:roc`, etc.).
  Defaults to `:gregorian`.

* `:locale` — display locale. Defaults to
  `Localize.get_locale/0`.

* `:min`, `:max` — bounds as ISO strings or `Date`
  structs. Cells outside the bounds render as
  disabled.

* `:display_format` — one of `:short`, `:medium`
  (default), `:long`, `:full`. Controls the visible
  text-input formatting (the wire value is always ISO).

* `:class`, `:input_class`, `:button_class`,
  `:overlay_class` — customisation hooks.

---

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