Components

TimeRangePicker

A time range in now-15m syntax — like Grafana and Kibana.

Picking a time range in now-15m syntax — as in Grafana and Kibana. Ready made ranges, free-form expressions, and stepping back and forth by the range's own length.

Example

{ from: "now-24h", to: "now" }

Syntax

An expression is now with an offset and a rounding:

text

now              right now
now-15m          fifteen minutes ago
now-1h           an hour ago
now/d            the start of today (on the left) / the end (on the right)
now-1d/d         all of yesterday
now/w            this week (from Monday)
2026-02-14       a specific date

Props

Prop	Type	Default	Description
`value`*	`{ from, to }`	—	The range as a pair of expressions.
`onChange`*	`(range) => void`	—	The new range.
`presets`	`TimePreset[]`	—	Your own set of ready-made ranges instead of the default.
`now`	`Date`	—	The reference point for expressions. Defaults to now.
`nudge`	`boolean`	`true`	«Earlier/later» arrows — stepping by the range's own length.
`custom`	`boolean`	`true`	Allow entering your own expressions.
`locale`	`string`	`en-US`	The locale for captions.

value*{ from, to }

The range as a pair of expressions.

onChange*(range) => void

The new range.

presetsTimePreset[]

Your own set of ready-made ranges instead of the default.

nowDate

The reference point for expressions. Defaults to now.

nudgeboolean

defaults to: true

«Earlier/later» arrows — stepping by the range's own length.

customboolean

defaults to: true

Allow entering your own expressions.

localestring

defaults to: en-US

The locale for captions.

The parser, separately

tsx

import {
  resolveRange,      // { from, to } of expressions → a pair of Dates
  parseTimeExpr,     // one expression → a Date (null if unparseable)
  shiftRange,        // step by the range's own length
  toAbsolute,        // convert to absolute dates
  TIME_PRESETS,      // the standard ranges
} from "@toimetdev/pathlogs-core";