Localize.Inputs.Date.Components.DatePickerLive (Localize.Inputs.Date v0.1.1)

Copy Markdown View Source

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.