PineUiPhoenix.Components.DatePicker (Pine UI v0.2.1)

Copy Markdown View Source

A calendar date picker.

A port of the Pines date picker.

<.date_picker name="due_on" label="Due date" value={@due_on} />

The calendar grid is built on the server

Pines builds the month grid in Alpine. This port computes it in Elixir instead and renders real <button> elements, which buys three things: the dates are in the DOM for tests and crawlers, Date handles leap years and month lengths rather than hand-rolled JavaScript, and keyboard navigation works on ordinary focusable elements.

Alpine only handles opening the panel and moving between months, and month changes are driven through phx-click when you pass on_navigate, so a server-rendered calendar stays authoritative.

Summary

Forms

date_picker(assigns)

Renders a date picker.

Forms

date_picker(assigns)

Renders a date picker.

Accessibility

The calendar is a grid of gridcell buttons inside a labelled dialog. The selected day carries aria-selected, today carries aria-current="date", and out-of-range days are genuinely disabled rather than merely dimmed.

Attributes

  • id (:string) - Defaults to nil.

  • name (:string) (required)

  • value (:any) - A Date, an ISO 8601 string, or nil. Defaults to nil.

  • label (:string) - Defaults to nil.

  • placeholder (:string) - Defaults to "Select a date".

  • hint (:string) - Defaults to nil.

  • error (:string) - Defaults to nil.

  • disabled (:boolean) - Defaults to false.

  • required (:boolean) - Defaults to false.

  • min (:any) - Earliest selectable date. Defaults to nil.

  • max (:any) - Latest selectable date. Defaults to nil.

  • month (:any) - Month to display. Defaults to the value's month, or today. Defaults to nil.

  • first_day_of_week (:integer) - 1 = Monday (ISO), 7 = Sunday. Defaults to 1.

  • format (:string) - Calendar.strftime/2 format for the input. Defaults to "%Y-%m-%d".

  • on_navigate (:string) - A phx-click event fired with a month value when the user changes month. Provide it to render months from the server; omit it and the picker shows only the initial month's grid, which suits a simple form.

    Defaults to nil.

  • class (:string) - Defaults to nil.

  • container_class (:string) - Defaults to nil.

  • Global attributes are accepted.