Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA pair of native date inputs for a start and end date, with optional preset buttons.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Legend for the group. |
value | DateRange | - | Controlled range. |
defaultValue | DateRange | { from: "", to: "" } | Initial range when uncontrolled. |
onValueChange | (range: DateRange) => void | - | Called when either date or a preset changes. |
presets | DateRangePreset[] | [] | Quick selections shown below the inputs. |
min | string | - | Earliest selectable date (YYYY-MM-DD). |
max | string | - | Latest selectable date (YYYY-MM-DD). |
disabled | boolean | false | Disables the inputs and presets. |
name | string | - | Form field prefix. Inputs are named {name}.from and {name}.to. |
Also accepts all <fieldset> props.
| Field | Type | Description |
|---|---|---|
from | string | Inclusive start date, YYYY-MM-DD. |
to | string | Inclusive end date, YYYY-MM-DD. |
DateRangePreset is a DateRange plus a label: string.
min / max. If the start moves past the end (or the reverse), the other side follows so the range stays valid.aria-pressed when they match the current range.