# `PhiaUi.Components.DateRangePresets`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/date_range_presets.ex#L1)

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.

# `date_range_presets`

## 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`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*