Locale-aware date input with a popup calendar grid.

Renders a text input that accepts the locale's CLDR date patterns plus ISO-8601, paired with a calendar-icon trigger that opens a Gregorian month grid for picking. Selecting a day fills the text input (locale-formatted) and a hidden sibling input (ISO wire format). On submit the form receives params[field] as "YYYY-MM-DD".

Server-side, parse with Localize.Inputs.Date.Parser.parse_date/2 or Calendrical.Date.parse/2.

Multi-calendar parsing works (Buddhist, Islamic, Japanese, etc.) — the user can type in their locale's calendar representation and the server parses correctly. The popup grid renders in Gregorian; non-Gregorian grid rendering is a follow-on enhancement.

Attributes

• :form — the Phoenix.HTML.Form the field belongs to.

• :field — the form field as an atom.

• :value — explicit ISO date string; otherwise pulled from @form[@field].

• :locale — display locale. Defaults to Localize.get_locale/0.

• :min, :max — ISO date strings or Date structs.

• :placeholder — placeholder text for the text input.

• :display_format — one of :short, :medium (default), :long, :full. Controls the locale-formatted display shape; the wire value is always ISO.

• :js — set to false to skip the phx-hook attribute.

• :class, :input_class, :button_class, :overlay_class — customisation hooks.

Examples

<.date_input form={@form} field={:dob} />

<.date_input
  form={@form}
  field={:start_date}
  min={~D[2026-01-01]}
  max={~D[2026-12-31]}
  display_format={:long}
/>

Attributes

• form (Phoenix.HTML.Form) (required)
• field (:atom) (required)
• value (:any) - Defaults to nil.
• locale (:any) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• display_format (:atom) - Defaults to :medium. Must be one of :short, :medium, :long, or :full.
• calendar (:atom) - Defaults to :gregorian.
• variant (:atom) - Defaults to :auto. Must be one of :auto, :dropdown, or :sheet.
• js (:boolean) - Defaults to true.
• class (:string) - Defaults to nil.
• input_class (:string) - Defaults to nil.
• button_class (:string) - Defaults to nil.
• overlay_class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "readonly", "required", "autofocus"].

Locale-aware date-range input.

Renders two paired text inputs (from / to) inside a single grouped wrapper. Each field is independently editable; the pair submits as params[field] = %{"from" => "YYYY-MM-DD", "to" => "YYYY-MM-DD"}.

Server-side, parse with Calendrical.Date.parse_range/2 passing the {from, to} tuple from params[field].

Attributes

• :form — the Phoenix.HTML.Form the field belongs to.

• :field — the form field as an atom; sub-fields submit under params[field][from] and params[field][to].

• :locale, :min, :max, :display_format, :variant, :js — passed through to both inputs.

• :class, :input_class, :button_class, :overlay_class — customisation hooks.

Examples

<.date_range_input form={@form} field={:stay} />

<.date_range_input
  form={@form}
  field={:trip}
  min={~D[2026-01-01]}
  max={~D[2026-12-31]}
/>

Attributes

• form (Phoenix.HTML.Form) (required)
• field (:atom) (required)
• locale (:any) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• placeholder_from (:string) - Defaults to nil.
• placeholder_to (:string) - Defaults to nil.
• display_format (:atom) - Defaults to :medium. Must be one of :short, :medium, :long, or :full.
• calendar (:atom) - Defaults to :gregorian.
• variant (:atom) - Defaults to :auto. Must be one of :auto, :dropdown, or :sheet.
• js (:boolean) - Defaults to true.
• class (:string) - Defaults to nil.
• input_class (:string) - Defaults to nil.
• button_class (:string) - Defaults to nil.
• overlay_class (:string) - Defaults to nil.

Locale-aware date-range input with a unified popup calendar (click start, then click end inside the same grid). Pairs with RangePicker JS hook.

Renders two text inputs (visible "from" and "to") plus a single shared trigger and overlay. The user clicks the trigger to open the popup, clicks once for the start, hovers to preview, clicks again for the end. Both text inputs and both hidden ISO inputs populate.

Submits as params[field] = %{"from" => "YYYY-MM-DD", "to" => "YYYY-MM-DD"}. Server-side, parse with Calendrical.Date.parse_range/2 passing the {from, to} tuple.

Attributes

Same shape as date_range_input/1: :form, :field, :locale, :min, :max, :display_format, :calendar, :variant, :js, :class, etc.

Examples

<.date_range_picker form={@form} field={:stay} />

Attributes

• form (Phoenix.HTML.Form) (required)
• field (:atom) (required)
• locale (:any) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• placeholder_from (:string) - Defaults to nil.
• placeholder_to (:string) - Defaults to nil.
• display_format (:atom) - Defaults to :medium. Must be one of :short, :medium, :long, or :full.
• calendar (:atom) - Defaults to :gregorian.
• variant (:atom) - Defaults to :auto. Must be one of :auto, :dropdown, or :sheet.
• js (:boolean) - Defaults to true.
• class (:string) - Defaults to nil.
• input_class (:string) - Defaults to nil.
• button_class (:string) - Defaults to nil.
• overlay_class (:string) - Defaults to nil.