TimePicker

Popover body for choosing an hour and minute. Shows an hour/minute stepper by default, and switches to a scrollable hours or minutes grid when either value is tapped. Controlled by a { hour, minute } object.

When to use

Use TimePicker when you need the raw time-selection surface — e.g. inside your own popover or layout. It is a controlled primitive: you own the selectedTime/onChange state.

For a ready-made text field with a clock trigger and popover, use TimePickerInput instead.
It is also the time tab of DatetimePicker.

There is no @uxf/form twin of the bare picker — the form integration lives on @uxf/form/time-picker-input.

Usage

import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
import { TimePicker } from "@uxf/ui/time-picker";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState<TimeType | null>(null);

    return <TimePicker onChange={setValue} selectedTime={value} />;
}

Props

Prop	Type	Default	Description
`selectedTime`	`TimeType \| null`	— (required)	Current value, `{ hour: number; minute: number }`, or `null`.
`onChange`	`(data: OnTimeChangeType) => void`	— (required)	Called with the new `{ hour, minute }`, or `null`.
`preventScroll`	`boolean`	`false`	Passed through to the underlying time-picker hook to suppress scroll-into-view on focus.
`onClosePopover`	`() => void`	—	Declared in the props type but not referenced by the component itself (see note below).

TimeType ({ hour: number; minute: number }) and OnTimeChangeType (TimeType | null) are exported from @uxf/datepicker/hooks/use-time-picker.

Requirements

Client component ("use client").

Stepper button titles are read from the uxf-ui-time-picker translation namespace bundled with @uxf/ui.

Import the required stylesheets once in your global CSS:

@import url("@uxf/ui/css/time-picker.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab

When to use

Use TimePicker when you need the raw time-selection surface — e.g. inside your own popover or layout. It is a controlled primitive: you own the selectedTime/onChange state.

For a ready-made text field with a clock trigger and popover, use TimePickerInput instead.

It is also the time tab of DatetimePicker.

There is no @uxf/form twin of the bare picker — the form integration lives on @uxf/form/time-picker-input.

Usage

import { TimeType } from "@uxf/datepicker/hooks/use-time-picker"; import { TimePicker } from "@uxf/ui/time-picker"; import { useState } from "react"; function Example() { const [value, setValue] = useState<TimeType | null>(null); return <TimePicker onChange={setValue} selectedTime={value} />; }

Props

Prop

Type

Default

Description

selectedTime

TimeType | null

— (required)

Current value, { hour: number; minute: number }, or null.

onChange

(data: OnTimeChangeType) => void

— (required)

Called with the new { hour, minute }, or null.

preventScroll

boolean

false

Passed through to the underlying time-picker hook to suppress scroll-into-view on focus.

onClosePopover

() => void

—