Loading…

Time Range Picker

A time range whose value is an expression, so it stays relative across a reload.

Forms
2 files
1 npm package
Accessibility notes

Installation

The CLI installs button, calendar, input and popover as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add time-range-picker

npm packages installed: react-day-picker.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { TimeRange } from "@/components/ui/time-range-picker";

Examples

Every example the tests run, live and operable, side by side.

Default
Stays Relative
Snapping
With Calendar
Expression Entry
In Another Zone
Custom Presets
Invalid Value

API

Generated from the component's own types, so a prop cannot appear here without existing.

<TimeRange>

Prop	Type	Default
`children` (required)	`ReactNode`	—
`defaultValue`	`string`	`"now-6h..now"`
`locale`	`string`	—
`now` The instant relative expressions are measured from. Supplied by the consumer so nothing here reads the clock during render. Pass a value that changes when you refresh; a stable one holds the window still between them.	`Date`	—
`onOpenChange`	`(open: boolean) => void`	—
`onValueChange`	`(expression: string) => void`	—
`open`	`boolean`	—
`presets`	`TimeRangePreset[]`	`DEFAULT_PRESETS`
`timeZone` IANA zone the snapping happens in. Defaults to the runtime zone.	`string`	—
`value` The expression, e.g. `now-6h..now`. Controlled.	`string`	—

<TimeRangeTrigger>

Prop	Type	Default
`showResolved` Shows the resolved window under the label. Off by default; it is long.	`boolean`	`false`

Plus every attribute of <button>.

<TimeRangeContent>

Prop	Type	Default
`label` Names the dialog.	`string`	`"Choose a time range"`

<TimeRangePresets>

Plus every attribute of <div> except children.

<TimeRangeExpression>

Plus every attribute of <div> except children.

<TimeRangeCalendar>

Prop	Type	Default
`numberOfMonths`	`number`	`1`

Plus every attribute of <div> except children.

Accessibility

The trigger is named by the range it holds — "Last 6 hours" — and the window that resolves to is read after it, so the relative choice is not replaced by two timestamps. The popover carries role="dialog" and is named. Presets are buttons rather than radios because choosing one both selects and dismisses, with aria-pressed carrying which matches the current expression. The expression field reports why an unparseable entry is invalid through one aria-describedby element that the preview and the error share, so a reader hears the error replace the preview rather than both at once; an invalid expression is never applied, because a chart silently re-scoping itself is worse than one that refuses.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

children

ReactNode

—

defaultValue

string

"now-6h..now"

locale

string

—

now

The instant relative expressions are measured from. Supplied by the consumer so nothing here reads the clock during render. Pass a value that changes when you refresh; a stable one holds the window still between them.

Date

—

onOpenChange

(open: boolean) => void

—

onValueChange

(expression: string) => void

—

open

boolean

—

presets

TimeRangePreset[]

DEFAULT_PRESETS

timeZone

IANA zone the snapping happens in. Defaults to the runtime zone.

string

—

value

The expression, e.g. now-6h..now. Controlled.

string

—

Prop

Type

Default

showResolved

Shows the resolved window under the label. Off by default; it is long.

boolean

false

Prop

Type

Default

label

Names the dialog.

string

"Choose a time range"

Prop

Type

Default

numberOfMonths

number

1