Time picker

A TimePicker sets a time of day, with one input per unit. Its value is a Date, and only the time part counts.

Usage#

import { TimePicker } from "@clawscale/react/datetime";

<TimePicker precision="second" value={time} onChange={setTime} />

Examples#

Precision#

precision sets the smallest unit: minute (default), second or millisecond. Type a value, or step a unit with the up and down arrow keys.

Nightly backup

Log rotation

Trace span start

::.

datetime/time-picker/precision.tsx

import { TimePicker } from "@clawscale/react/datetime";

export default function TimePickerPrecision() {
  return (
    <div style={{ alignItems: "center", display: "grid", gap: "12px 24px", gridTemplateColumns: "auto auto" }}>
      <span>Nightly backup</span>
      <TimePicker precision="minute" defaultValue={new Date(2026, 8, 14, 2, 30)} />
      <span>Log rotation</span>
      <TimePicker precision="second" defaultValue={new Date(2026, 8, 14, 0, 0, 15)} />
      <span>Trace span start</span>
      <TimePicker precision="millisecond" defaultValue={new Date(2026, 8, 14, 14, 7, 32, 418)} />
    </div>
  );
}

12-hour clock#

useAmPm shows hours from 1 to 12 and an AM and PM menu. The value is still a regular Date.

datetime/time-picker/am-pm.tsx

import { TimePicker } from "@clawscale/react/datetime";

// On-call handoff at 9:00 PM.
export default function TimePickerAmPm() {
  return <TimePicker useAmPm defaultValue={new Date(2026, 8, 14, 21, 0)} />;
}

Arrow buttons#

showArrowButtons adds a button above and below each unit to step it up or down.

datetime/time-picker/arrow-buttons.tsx

import { TimePicker } from "@clawscale/react/datetime";

// Daily cost report delivery.
export default function TimePickerArrowButtons() {
  return <TimePicker showArrowButtons precision="second" defaultValue={new Date(2026, 8, 14, 6, 0, 0)} />;
}

Minimum and maximum time#

minTime and maxTime limit the time. Only the time of each Date counts. When maxTime is earlier than minTime, the range wraps past midnight. A time outside the range reverts to the last valid one.

datetime/time-picker/min-max.tsx

import { TimePicker } from "@clawscale/react/datetime";

// Batch jobs may only start between 22:00 and 04:00. Only the time of each date matters.
export default function TimePickerMinMax() {
  return (
    <TimePicker
      minTime={new Date(2026, 0, 1, 22, 0)}
      maxTime={new Date(2026, 0, 1, 4, 0)}
      defaultValue={new Date(2026, 8, 14, 23, 30)}
    />
  );
}

Interactive playground#

value: 21:30:15.250

Props

Precision

12-hour clockArrow buttonsSelect all on focusDisabled

View source on GitHub

Props interface#

interface TimePickerProps extends Props@clawscale/react/datetime

Props	Description
`autoFocus`	`boolean` = `false` Whether to focus the first input when it opens initially.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`defaultValue`	`Date` Initial time the `TimePicker` will display. This should not be set if `value` is set.
`disabled`	`boolean` = `false` Whether the time picker is non-interactive.
`maxTime`	`Date` The latest time the user can select. The year, month, and day parts of the `Date` object are ignored. While the `maxTime` will be later than the `minTime` in the basic case, it is also allowed to be earlier than the `minTime`. This is useful, for example, to express a time range that extends before and after midnight. If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
`minTime`	`Date` The earliest time the user can select. The year, month, and day parts of the `Date` object are ignored. While the `minTime` will be earlier than the `maxTime` in the basic case, it is also allowed to be later than the `maxTime`. This is useful, for example, to express a time range that extends before and after midnight. If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
`onBlur`	`(event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void` Callback invoked on blur event emitted by specific time unit input
`onChange`	`(newTime: Date) => void` Callback invoked when the user changes the time.
`onFocus`	`(event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void` Callback invoked on focus event emitted by specific time unit input
`onKeyDown`	`(event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void` Callback invoked on keydown event emitted by specific time unit input
`onKeyUp`	`(event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void` Callback invoked on keyup event emitted by specific time unit input
`precision`	`TimePrecision` = `TimePrecision.MINUTE` The precision of time the user can set.
`selectAllOnFocus`	`boolean` = `false` Whether all the text in each input should be selected on focus.
`showArrowButtons`	`boolean` = `false` Whether to show arrows buttons for changing the time.
`useAmPm`	`boolean` = `false` Whether to use a 12 hour format with an AM/PM dropdown.
`value`	`Date \| null` The currently set time. If this prop is provided, the component acts in a controlled manner.