Search

Search components and blocks

Sign in

Time Picker

Pro

The Date Picker's sibling: the same Popover and Button, with the hour, minute and AM/PM in the trigger rolling independently when they change. The panel reuses the calendar's pop-and-ripple selection on every cell, has a Now shortcut, and closes shortly after the minute is picked.

pnpm dlx shadcn@latest add @ditherui/time-picker

Props

nowDate—
value{ hour: number; minute: number }undefined
defaultValue{ hour: number; minute: number }undefined
onValueChange(time: TimeValue) => void—
placeholderstring"Pick a time"
classNamestring—
openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—

When to use the time picker

Use it to choose a time. It is the Date Picker's sibling, with the hour, minute and AM/PM in the trigger rolling independently.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components