Composite
Date Range Picker Requires JS
Two-handle date range with presets (last 7 days, this month, this quarter…). For analytics filters, booking flows, report scopes.
About
Overview
For "from–to" date ranges. The empty host renders a single trigger showing start → end, and a dropdown holding a preset list ("Last 7 days", "Last 30 days", "This month"), two side-by-side calendars, and Cancel / Apply. The selection stays a draft until Apply, so Escape and outside-click revert instead of committing.
Live
Demo
<ren-date-range-picker name="period"
start="2026-04-01" end="2026-04-30"
presets="last7,last30,thisMonth,thisYear">
</ren-date-range-picker>The demo mounts two pickers so the anchoring stays honest: each host generates its own CSS anchor name on upgrade, so both dropdowns open against their own trigger instead of stacking on the last one in the document.
Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
start / end | "YYYY-MM-DD" | — | Range bounds. |
max-range | number (days) | — | Limit the maximum span the user can pick. |
presets | string list | "last7, last30, thisMonth, lastMonth" | Comma-separated preset keys: today, yesterday, last7, last14, last30, last90, thisWeek, lastWeek, thisMonth, lastMonth, thisQuarter, thisYear, lastYear. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for the range popover. Reflected to data-side. |
Inclusive by default
Accessibility
- Inside the calendar, the two ends of the range have distinct ARIA labels ("Start of range", "End of range").
- Days that would fall outside the allowed range get
aria-disabled="true".