Renders an inline calendar: a month grid that is always visible, for scheduling views, sidebars and availability pickers.

<.calendar id="when" name="when" value={@date} on_change={JS.push("pick-day")} />
<.calendar id="stay" range from_name="from" to_name="to" from_value={@from} to_value={@to} min={Date.utc_today()} />

Hidden inputs carry the value(s) so the calendar works inside a form (phx-change fires on every pick). on_change runs with phx-value-date (and phx-value-end for ranges) once a selection is complete. Re-render with a new value to control the selection from the server.

Keyboard: arrows move by day and week, PageUp/PageDown by month, Shift+PageUp/PageDown by year, Home/End to the week bounds, Enter or Space selects. The grid follows the WAI-ARIA grid pattern with a roving tab stop.

Attributes

• id (:string) (required)
• name (:any) - hidden input name for the (start) value. Defaults to nil.
• value (:any) - Defaults to nil.
• range (:boolean) - Defaults to false.
• from_name (:any) - range: name for the start; defaults to name. Defaults to nil.
• to_name (:any) - range: name for the end. Defaults to nil.
• from_value (:any) - range: start; defaults to value. Defaults to nil.
• to_value (:any) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• locale (:string) - BCP 47 tag; defaults to the browser's. Defaults to nil.
• footer (:boolean) - show the Clear / Today buttons. Defaults to true.
• label (:string) - accessible name; defaults to "Calendar". Defaults to nil.
• on_change (Phoenix.LiveView.JS) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Renders a date field: a native <input type="date"> (typed entry, mobile pickers, min/max validation, phx-change) plus a calendar popover for pointer and keyboard selection.

<.date_picker field={@form[:due_on]} label="Due on" min={Date.utc_today()} />
<.date_picker name="from" value={~D[2026-09-11]} label="From" locale="de-DE" />

Values are ISO 8601 dates (Date structs or "YYYY-MM-DD" strings). The calendar is rendered by the hook in the browser's (or locale's) language, with the locale's first day of the week. Keyboard in the calendar: arrows move by day and week, PageUp/PageDown by month, Home/End to week bounds, Enter selects, Escape closes.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• locale (:string) - BCP 47 tag; defaults to the browser's. Defaults to nil.
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "form", "readonly"].

Renders a date range: two native date inputs sharing one calendar, where the first click picks the start and the second the end.

<.date_range_picker from={@form[:starts_on]} to={@form[:ends_on]} label="Dates" />
<.date_range_picker id="trip" from_name="from" to_name="to" from_value={~D[2026-10-01]} to_value={~D[2026-10-07]} label="Trip" />

Attributes

• id (:any) - Defaults to nil.
• from (Phoenix.HTML.FormField)
• to (Phoenix.HTML.FormField)
• from_name (:any)
• to_name (:any)
• from_value (:any)
• to_value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• locale (:string) - Defaults to nil.
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Renders a time field: a native <input type="time"> (typed entry, mobile pickers, min/max, phx-change) plus a popover list of time slots.

<.time_picker field={@form[:starts_at]} label="Starts at" step={15} min="09:00" max="17:30" />
<.time_picker name="at" value="09:30" label="At" hour_cycle="h23" />

Values are "HH:MM" strings or Time structs. step is in minutes and drives both the native input's granularity and the slot list. Slots are formatted in the browser's (or locale's) convention; set hour_cycle to "h12" or "h23" to force one.

Keyboard: the clock button (or Alt+ArrowDown in the input) opens the list; arrows move, PageUp/PageDown jump an hour, Home/End to the bounds, typing jumps to a matching slot (9:3 or 14), Enter selects, Escape closes.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) - Defaults to nil.
• description (:string) - Defaults to nil.
• step (:integer) - minutes between slots. Defaults to 30.
• min (:any) - Defaults to nil.
• max (:any) - Defaults to nil.
• locale (:string) - Defaults to nil.
• hour_cycle (:string) - Defaults to nil.Must be one of nil, "h12", or "h23".
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• disabled (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• style (:string) - inline style for the field wrapper. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "form", "readonly"].