Time Picker

A time-only input for scheduling and time selection workflows. Renders a scrollable hour/minute selector in a popover. Supports 12-hour/24-hour formats, configurable minute step, min/max time boundaries, label, and helper text.

Installation

1. Copy the source code:

Source: packages/ui/src/common/data-input/dates/time-picker.tsx
Place in your project: components/common/data-input/dates/time-picker.tsx

2. Install dependencies:

npm install date-fns

3. Update the import paths to match your project structure.

Usage

import { TimePicker } from "@hoag/ui/time-picker";
 
export default function Demo() {
  const [time, setTime] = React.useState("08:30");
  return <TimePicker value={time} onChange={setTime} />;
}

Default

Chọn thời gian

<TimePicker value="08:30" onChange={setTime} />

24-hour vs 12-hour Format

Chọn thời gian

{
  /* 24-hour (default) */
}
<TimePicker value="14:30" onChange={setTime} />;
 
{
  /* 12-hour format */
}
<TimePicker use12HourFormat value="14:30" onChange={setTime} />;

With Label and Helper Text

Giờ bắt đầu

Chọn giờ làm việc (8:00 - 18:00)

<TimePicker
  label="Giờ bắt đầu"
  helperText="Chọn giờ làm việc (8:00 - 18:00)"
  value="08:00"
  onChange={setTime}
/>

Minute Step

Dùng minuteStep để chỉ hiển thị các mốc phút theo bước nhảy nhất định.

Đặt lịch (bước 15 phút)

<TimePicker minuteStep={15} value="09:00" onChange={setTime} />

Disabled

Chọn thời gian

<TimePicker value="08:30" disabled onChange={setTime} />

API Reference

`<TimePicker>`

Prop	Type	Default	Description
`value`	`string`	—	Controlled time in `HH:mm` format (24-hour)
`onChange`	`(time: string) => void`	—	Callback when time changes (required)
`use12HourFormat`	`boolean`	`false`	Render 12-hour format with AM/PM
`minuteStep`	`number`	`1`	Minute interval step (e.g. `15` → 0, 15, 30, 45)
`label`	`string`	—	Input label text
`placeholder`	`string`	—	Input placeholder
`helperText`	`string`	—	Helper text displayed below the input
`size`	`"default" \| "lg"`	`"default"`	Input size variant
`error`	`boolean`	`false`	Error state
`disabled`	`boolean`	`false`	Disable the picker
`min`	`Date`	—	Minimum selectable time
`max`	`Date`	—	Maximum selectable time
`hasRemoveIcon`	`boolean`	`true`	Show remove icon when a value is selected
`onClearValue`	`() => void`	—	Callback when clear/remove button is clicked
`modal`	`boolean`	`false`	Render popover as modal
`className`	`string`	—	Custom CSS class

Date Time Picker Calendar