PhiaUi.Components.DateStrip (phia_ui v0.1.17)

Copy Markdown View Source

DateStrip — a horizontal scrollable strip of day cards (week selector).

Renders a row of date cards, each displaying the day number and abbreviated day name. Supports selected state, today highlight, click events, size variants, and optional horizontal scrolling. Zero JavaScript.

Examples

<%!-- Basic week strip --%>
<.date_strip dates={@week_dates} />

<%!-- With selected date --%>
<.date_strip dates={@week_dates} selected_date={@selected} on_select="pick_date" />

<%!-- With today highlight --%>
<.date_strip dates={@week_dates} today={Date.utc_today()} selected_date={@selected} />

<%!-- Small variant --%>
<.date_strip dates={@week_dates} size={:sm} />

<%!-- Non-scrollable (wraps) --%>
<.date_strip dates={@week_dates} scrollable={false} />

Summary

Functions

date_strip(assigns)

Renders a horizontal strip of date cards.

Functions

date_strip(assigns)

Renders a horizontal strip of date cards.

Examples

<.date_strip dates={@dates} selected_date={@selected} on_select="pick_date" today={Date.utc_today()} />

Attributes

  • dates (:list) (required) - List of Date.t() values to render as cards.
  • selected_date (:any) - Currently selected Date.t(), or nil for no selection. Defaults to nil.
  • today (:any) - Date.t() to highlight as today. Caller is responsible for supplying this. Defaults to nil.
  • on_select (:string) - phx-click event name fired when a card is clicked. Receives phx-value-date (ISO 8601). Defaults to nil.
  • size (:atom) - Card size variant. Defaults to :default. Must be one of :sm, :default, or :lg.
  • scrollable (:boolean) - When true (default) the strip scrolls horizontally. When false, cards wrap. Defaults to true.
  • class (:string) - Additional CSS classes merged onto the wrapper. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the wrapper div.