Time Picker
Time picker with scrollable dropdown columns and native input mode.
Preview
Hr
Min
Sec
Installation
npx drivn add time-pickerUsage
Import TimePicker and manage selection with useState.
1 import { TimePicker } from "@/components/ui/time-picker" 2 3 const [time, setTime] = React.useState<Date | undefined>() 4 5 <TimePicker 6 selected={time} 7 onSelect={setTime} 8 />
12-Hour Format
Switch to 12-hour clock with AM/PM selection.
Hr
Min
With Seconds
Show a seconds column alongside hours and minutes.
Hr
Min
Sec
Custom Format
Pass a formatTime function to control the display text.
Hr
Min
Drivn Feature
Input Mode
Use TimePicker.Input for a native time input with Drivn styling.
Disabled
Both modes support the disabled state.
Hr
Min
API Reference
TimePicker
| Prop | Type | Default | Description |
|---|---|---|---|
selected | Date | undefined | — | The currently selected time as a Date object |
onSelect | (date: Date | undefined) => void | — | Callback when a time is selected |
format | '12h' | '24h' | '24h' | Clock format — 12-hour with AM/PM or 24-hour |
showSeconds | boolean | false | Show seconds column in the dropdown |
placeholder | string | "Pick a time" | Text shown when no time is selected |
formatTime | (date: Date) => string | toLocaleTimeString | Custom time formatting function |
disabled | boolean | false | Disable the time picker trigger |
className | string | — | Additional CSS classes for the root wrapper |
TimePicker.Input
| Prop | Type | Default | Description |
|---|---|---|---|
selected | Date | undefined | — | The currently selected time as a Date object |
onSelect | (date: Date | undefined) => void | — | Callback when a time is selected |
min | string | — | Minimum allowed time (e.g. "09:00") |
max | string | — | Maximum allowed time (e.g. "17:00") |
step | number | — | Step interval in seconds (e.g. 900 for 15 minutes) |
disabled | boolean | false | Disable the input |
className | string | — | Additional CSS classes |