PhiaUi.Components.DateRangePresets (phia_ui v0.1.17)

Copy Markdown View Source

Preset date range picker with sidebar shortcuts and a calendar grid.

Renders a two-column panel:

  • Left: a list of preset shortcuts (Today, Yesterday, Last week, etc.)
  • Right: a single-month calendar in range mode for custom selection

The bottom footer shows the formatted date range and optional Cancel/Done action buttons. Zero JavaScript — state lives entirely in the parent LiveView.

State management

The parent LiveView owns all state. It must handle:

  • on_preset event — fired when a preset button is clicked, sends %{"preset" => "today" | "yesterday" | "last_week" | ...}
  • on_change event — fired when a calendar day is clicked (for custom range), sends %{"date" => "YYYY-MM-DD"}
  • calendar-prev-month / calendar-next-month — navigation events from the inner calendar (hardcoded in calendar/1)
  • on_cancel / on_confirm — Cancel/Done button events

When the LiveView receives on_preset, it computes the from and to dates for the selected preset and updates assigns accordingly.

Example

<.date_range_presets
  id="analytics-range"
  active_preset={@active_preset}
  from={@date_from}
  to={@date_to}
  current_month={@current_month}
  on_preset="preset-selected"
  on_change="date-range-day-clicked"
  on_cancel="cancel-range"
  on_confirm="apply-range"
/>

Preset IDs

The built-in presets fire these preset values: "today", "yesterday", "last_week", "last_7_days", "this_month", "last_30_days", "custom".

Custom presets

Pass a custom list via the :presets attr. When omitted, the seven default presets are shown.

Summary

Functions

date_range_presets(assigns)

Functions

date_range_presets(assigns)

Attributes

  • id (:string) (required) - Unique DOM id prefix.
  • current_month (:any) (required) - Currently displayed month (Date.t()).
  • active_preset (:string) - ID of the currently active preset. Defaults to "custom".
  • from (:any) - Range start date (Date.t()) or nil. Defaults to nil.
  • to (:any) - Range end date (Date.t()) or nil. Defaults to nil.
  • presets (:list) - Override preset list (list of %{id: string, label: string}). Defaults to nil.
  • on_preset (:string) - Event fired on preset click. Defaults to "date-preset-change".
  • on_change (:string) - Event fired on calendar day click. Defaults to "date-range-changed".
  • on_cancel (:string) - Cancel button event. Defaults to "date-presets-cancel".
  • on_confirm (:string) - Done button event. Defaults to "date-presets-confirm".
  • show_actions (:boolean) - Show Cancel / Done buttons in footer. Defaults to true.
  • class (:string) - Defaults to nil.