Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA date picker whose caption drills from days to months to years, with a month-only mode and min and max limits.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
mode="month" skips the day view, for report periods, billing months or card expiry dates. Months outside min and max are disabled, and so are the arrows that would page past them.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "date" | "month" | "date" | Pick a day, or just a month and year. |
value | Date | null | - | Selected date when controlled. In month mode the day is 1. |
defaultValue | Date | null | null | Selected date on first render when uncontrolled. |
onValueChange | (date: Date) => void | - | Called with the picked date. |
min | Date | - | Earliest selectable date. |
max | Date | - | Latest selectable date. |
defaultMonth | Date | value, min or today | Month shown first. Pass it when rendering on the server. |
defaultView | "day" | "month" | "year" | per mode | View shown first. |
locale | string | "en-US" | Locale for month names and captions. |
Also accepts div props, such as aria-label.
Takes every MonthYearPicker prop except className, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Pick a date" / "Pick a month" | Trigger text when nothing is picked. |
formatValue | (date: Date) => string | medium date / long month | Formats the value on the trigger. |
id | string | - | Trigger id, for <label htmlFor>. |
disabled | boolean | false | Disable the trigger. |
className | string | - | Classes for the trigger button. |
pickerClassName | string | - | Classes for the picker inside the popover. |
The popover closes when a value is picked.
aria-disabled, so keyboard users can still move through them; picking them does nothing.aria-current="date", worked out after hydration so server and client markup match.