Event Calendar
Calendars
Source and install need .
pnpm dlx shadcn@latest add @assembli/time-range-pickerTime Range Picker
The time range control from Grafana and Datadog dashboards. The trigger names the window ("Last 24 hours") with a live dot, and arrows step it back or forward by its own width, snapping back to live. The popover takes shorthand like "15m", "last 90 minutes" or "yesterday" with a preview of the exact window, plus quick ranges, exact from and to fields with the span worked out, and recent ranges.
Props
Other props pass through to the root element.
value
TimeRange
defaultValue
TimeRange
Default
{ kind: "relative", amount: 24, unit: "h" }onValueChange
(value: TimeRange) => void
quickRanges
TimeRange[]
Default
DEFAULT_QUICKQuick ranges in the list.
weekStartsOn
0 | 1
Default
10 = Sunday, 1 = Monday, for "this week".
hideStepper
boolean
Default
falseHide the step back and forward buttons.
locale
string
| Prop | Type | Default | Description |
|---|---|---|---|
| value | TimeRange | – | |
| defaultValue | TimeRange | { kind: "relative", amount: 24, unit: "h" } | |
| onValueChange | (value: TimeRange) => void | – | |
| quickRanges | TimeRange[] | DEFAULT_QUICK | Quick ranges in the list. |
| weekStartsOn | 0 | 1 | 1 | 0 = Sunday, 1 = Monday, for "this week". |
| hideStepper | boolean | false | Hide the step back and forward buttons. |
| locale | string | – |
