RRenDSv0.13.0
GitHubGet started

Composite

Date Range Picker Requires JS

Two-handle date range with presets (last 7 days, this month, last quarter…). For analytics filters, booking flows, report scopes.

About

Overview

For "from–to" date ranges. Renders two inputs (start / end) plus an optional preset list ("Last 7 days", "Last 30 days", "This year"). The calendar lets users pick both ends visually.

Live

Demo

→
<ren-date-range-picker name="period"
                       start="2026-04-01" end="2026-04-30"
                       presets="7d,30d,90d,year">
</ren-date-range-picker>

Reference

API

AttributeTypeDefaultNotes
start / end"YYYY-MM-DD"—Range bounds.
max-rangenumber (days)—Limit the maximum span the user can pick.
presetsstring list—Comma-separated preset keys: 7d, 30d, 90d, year, ytd, last-quarter.
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".