Time Picker

A <TimePickerInput /> component built with React and Shadcn UI.

Demo

Hours

Minutes

Seconds

Hours

Minutes

Seconds

Period

No additional library
Listens to keydown events
Supports arrow navigation
Formats date values
Optimizes mobile keyboard

Get Started

Install shadcn/ui incl. the Input component (twelve-hour clocks also need the Select component)
Copy & paste time-picker-utils.tsx
Copy & paste time-picker-input.tsx
Define your TimePicker component (e.g. time-picker-demo.tsx)

Snippets

Powered by OpenStatus