PhiaUi.Components.DateCard (phia_ui v0.1.17)

DateCard component — a single selectable day card showing the day number and short weekday abbreviation.

Visual states

State	Appearance
`:default`	White/bg background, border, shadow-sm
`:today`	Soft primary tint (`bg-primary/10 text-primary border-primary/20`)
`:selected`	Solid primary fill (`bg-primary text-primary-foreground`)
`:disabled`	Muted, `opacity-50 pointer-events-none cursor-not-allowed`

Sizes

Size	Width	Height	Number text	Day text
`:sm`	w-12	h-16	text-xl	text-[10px]
`:default`	w-16	h-20	text-2xl	text-xs
`:lg`	w-20	h-24	text-3xl	text-sm

Examples

<%!-- Basic --%>
<.date_card date={~D[2026-03-23]} />

<%!-- Selected today --%>
<.date_card date={Date.utc_today()} selected today />

<%!-- Clickable --%>
<.date_card date={~D[2026-03-23]} on_click="select_date" />

<%!-- Disabled --%>
<.date_card date={~D[2026-03-23]} disabled />

Summary

Functions

date_card(assigns)

Renders a selectable day card with day number and short weekday abbreviation.

Functions

date_card(assigns)

Renders a selectable day card with day number and short weekday abbreviation.

Examples

<.date_card date={~D[2026-03-23]} />
<.date_card date={~D[2026-03-23]} selected />
<.date_card date={~D[2026-03-23]} today />
<.date_card date={~D[2026-03-23]} disabled />
<.date_card date={~D[2026-03-23]} on_click="select_date" />

Attributes

date (:any) (required) - Date.t() to display.
selected (:boolean) - Whether this card is selected. Defaults to false.
today (:boolean) - Whether this date is today. Defaults to false.
disabled (:boolean) - Whether this card is disabled. Defaults to false.
on_click (:string) - phx-click event name (ignored when disabled). Defaults to nil.
size (:atom) - Card size variant. Defaults to :default. Must be one of :sm, :default, or :lg.
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root div.