Skip to content

useHourCycle

Global (not per calendar) hour cycle state used by useDateFormatters.

ts
import { useHourCycle } from "@zaptime/core";

const { hourCycle, setHourCycle, clientOriginalHourCycle } = useHourCycle();

Client original hour cycle

Detected from the browser locale at load time.

ts
clientOriginalHourCycle; // "h11" | "h12" | "h23" | "h24" | undefined

Current hour cycle

ts
hourCycle.value;

Set hour cycle

ts
setHourCycle("h11"); // 12-hour, e.g. 2:30pm
setHourCycle("h23"); // 24-hour, e.g. 14:30

Formatting reacts immediately; no refetch is needed.