Date Range Picker
Overview
Usage
Examples
API
A date range picker lets the user choose a start and end date in one field. <rhombus-date-range-picker> wraps Material's mat-date-range-input in the same form-field shell as Input, Select, and Date Picker, but its public value is a plain { start, end } pair of ISO strings (YYYY-MM-DD) so it drops straight into a reactive form — and it routes the calendar's range highlight through the token contract so it re-skins with the active theme. This closes the last datepicker migration gap.
Example
Value: 2026-01-05 → 2026-01-20
When to use
- When the user must pick a contiguous span of calendar dates — a booking, a report window, a campaign flight, a filter range.
- Prefer it over two separate pickers when the two dates are semantically one value and you want in-range highlighting.
When not to use
- For a single date, use the Date Picker.
- For a free-form or partial date, use an Input; for a duration in days, a numeric input or Slider.
Was this page helpful?