Roadmap GitHub

Date Range Picker

A two-date range picker: two side-by-side months with synced navigation, live in-range hover preview, and quick presets. Commits two hidden ISO yyyy-MM-dd values.

<rhx-date-range-picker>

Examples

Basic with presets

Properties

Property Type Default Description
rhx-start-name string - Form field name for the hidden start date (ISO yyyy-MM-dd)
rhx-end-name string - Form field name for the hidden end date (ISO yyyy-MM-dd)
rhx-start-value string - Initial start date (ISO yyyy-MM-dd)
rhx-end-value string - Initial end date (ISO yyyy-MM-dd)
rhx-presets string - Comma list: today, yesterday, last7, last30, thismonth, lastmonth
rhx-min string - Earliest selectable date (ISO yyyy-MM-dd)
rhx-max string - Latest selectable date (ISO yyyy-MM-dd)
rhx-week-start string mon First day of the week: mon or sun
rhx-format string - .NET date format for display (default: culture short date)
rhx-size string medium small, medium, large
rhx-disabled bool false Disable the control

Accessibility

  • Trigger uses aria-haspopup="dialog"/aria-expanded; the popup is role="dialog" with two calendar grids.
  • Two hidden ISO yyyy-MM-dd inputs (start + end) for reliable model binding.
  • First day click sets the start; the second sets the end (auto-swapped if earlier); hovering previews the range; presets set both at once.
  • Keyboard: arrow keys move across both months, PageUp/PageDown change months, Enter selects, Escape closes.