Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTwo years of month grids in which two clicks choose a span of months, with a hover preview, a longest-span limit and a YYYY-MM range value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for spans of whole months: a reporting window, a fiscal period, a subscription term. Two clicks pick the ends in either order.
For days use range-calendar; for one month use month-picker.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { from: string; to: string } | null | null | Months as YYYY-MM. |
| onValueChange | (value: MonthRange | null) => void | - | Called when the second month is chosen. |
| numberOfYears | 1 | 2 | 2 | Years side by side. |
| maxMonths | number | - | Longest span; a longer pick restarts from that month. |
| min / max | string | - | Earliest and latest month. |
| defaultYear / locale / today / label | - | - | First year, locale, reference month, name. |
| Keys | Action |
|---|---|
| Arrow keys | Move between cells; Left and Right swap in right-to-left text, and moving past an edge changes the page |
| Home / End | First and last cell of the row |
| Page Up / Page Down | Previous or next page (year) |
| Enter / Space | Selects the focused cell |
| Escape | Not used; pick a month to restart a half-chosen range |
grid named "Month range, 2026"; months speak as "March 2026" and range cells are aria-selected.