Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA super date picker: quick ranges, relative windows (last or next N units, optionally rounded) and absolute start and end, with the resolved window and a now-15m expression.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for dashboards, logs and monitoring where people think in "the last 15 minutes" and sometimes in a fixed window. The value is data (direction, amount, unit) and also resolves to local date-times, so a saved dashboard stays relative.
For calendar-style period filters use range-calendar.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | TimeRangeValue | null | last 15 minutes | { type: "relative", direction, amount, unit, round? } or { type: "absolute", from, to }. |
| onValueChange | (value, resolved: { from; to }) => void | - | On every valid change, with the window resolved at now. |
| quickRanges | { label; value: RelativeRange }[] | 6 common | Quick tab entries. |
| now | string | clock | Local YYYY-MM-DDTHH:mm used to resolve; pass a fixed one for tests. |
| locale / label | string | browser / Time range | Formatting and heading. |
Helpers in date-time-core: resolveRelativeRange(range, now), relativeExpression(range) (now-15m, now+2w/w), parseRelativeExpression(text) and describeRelativeRange(range).
| Keys | Action |
|---|---|
| Left / Right (tabs) | Switch between Quick, Relative and Absolute |
| Arrow keys (direction, quick ranges) | Move between choices in a radio group |
| Typing in Amount | Updates the window when the number is 1 or more |
tablist) hold radio groups for quick ranges and direction, a labelled number input, a labelled select and a labelled switch.aria-invalid and keeps the last valid range; a reversed absolute range shows an alert.now-1M/M is the last full month window).