HEEx
<ConnieUI.Calendars.date_range_picker
id="catalog-date-range-picker"
value_start={@value_start}
value_end={@value_end}
change={JS.push("range:change")}
/>
Controls
Set by the example
value_start value_end change
Docs
Renders a date range picker calendar component using Cally.
The calendar features:
- Month and year select dropdowns for quick navigation (50 years back/forward)
- Previous/next month navigation buttons
- Grid view of dates with keyboard navigation support
- Range selection (start and end dates)
## Examples
<ConnieUI.Calendars.date_range_picker
id="my-range-calendar"
value_start={~D[2024-01-15]}
value_end={~D[2024-01-31]}
change={JS.dispatch("calendar:change")}
/>
| Attribute | Type | Default | Description |
|---|---|---|---|
| No data found. | |||
| id | :string |
|
|
| value_start | {:struct, Date} | nil |
|
| value_end | {:struct, Date} | nil |
|
| change | {:struct, Phoenix.LiveView.JS} | nil |
|