forms contract
DateRangePicker
Two-thumbed date selector. Defaults to two-month side-by-side calendar.
Variants
- default
- compact
Sizes
- md
- lg
Slots
- presets
Example
<DateRangePicker value={range} onChange={setRange} presets={['7d', '30d', 'mtd']} />Usage rule
Always include preset shortcuts (Today, Last 7 / 30 / 90 days, This month, Last month).
The full DateRangePicker contract has 3 more rules, plus the do-not patterns. Get the full recipe.