TimeConfig

Configuration object for time-related pickers. Shared across useDateTimePicker, useDateRangeTimePicker, and useStandaloneTimePicker.

import type { TimeConfig } from "react-date-range-picker-headless";

Fields

FieldTypeDefaultDescription
precisionTimePrecision"minute"Time display precision: "hour", "minute", or "second".
hourFormatHourFormat"24"12-hour or 24-hour format: "12" or "24".
minuteStepMinuteStep5Minute increment step.
secondStepSecondStep1Second increment step.
itemHeightnumber32Height (in px) of each scroll wheel item.

TypeScript Definition

interface TimeConfig {
  precision?: TimePrecision;
  hourFormat?: HourFormat;
  minuteStep?: MinuteStep;
  secondStep?: SecondStep;
  itemHeight?: number;
}
type TimePrecision = "hour" | "minute" | "second";
type HourFormat = "12" | "24";
type MinuteStep = 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
type SecondStep = 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;

Resolved Config

Hooks that accept TimeConfig return a resolvedTimeConfig with all defaults filled in:

type Required<TimeConfig>
// { precision: TimePrecision; hourFormat: HourFormat; minuteStep: MinuteStep; secondStep: SecondStep; itemHeight: number }

Use resolveTimeConfig() utility to resolve defaults manually:

import { resolveTimeConfig } from "react-date-range-picker-headless";


const resolved = resolveTimeConfig({ precision: "second" });
// { precision: "second", hourFormat: "24", minuteStep: 5, secondStep: 1, itemHeight: 32 }