React Time Picker Component Examples

The simplest use is a controlled TimePicker in its default 24-hour mode. Hold the selected time in React.useState<Date | undefined>(), pass selected and onSelect, and the trigger shows a Clock icon with the formatted time or the Pick a time placeholder. Opening the trigger reveals two scrolling columns — hours 00–23 and minutes 00–59 — each auto-centred on the current value.

The wrapper is marked 'use client' because it holds state with useState. Picking a value calls onSelect with a fresh Date, so the time flows back into your component as a real Date object you can store, format, or submit. This is the right default for most scheduling fields; see the full prop list on the Time Picker reference.

To show a 12-hour clock, pass format="12h". The hours column now runs 01–12, and an AM/PM column appears beside the minutes. Internally the component derives the period from whether the hour is 12 or more and converts your AM/PM choice back to a 24-hour Date with its to24 helper, so onSelect still hands you a standard Date regardless of the display format.

This is the format most North American scheduling UIs expect. Because the conversion happens inside the component, you never deal with 12-hour math yourself — you read and write a Date, and the picker handles the AM/PM bookkeeping. Pair it with a Date Picker when you need a full date-and-time field.

When minute precision is not enough, pass showSeconds to add a third scrolling column for seconds. The values run 00–59, matching the minutes column, and selecting a second updates the Date with that exact second. This is the control for timers, precise logging, or any field where the second matters.

The seconds column slots in between minutes and the AM/PM column (in 12-hour mode), and the auto-centre scroll applies to it just like the others. Combine showSeconds with format="12h" and you get hours, minutes, seconds, and AM/PM in one dropdown — every column built from the same Column sub-component, so they all behave identically.

By default the trigger formats the selected time with toLocaleTimeString using your format and showSeconds settings. To control the displayed string yourself — for a specific locale, a 24-hour rendering, or a shorter label — pass a formatTime function. It receives the selected Date and returns the string shown in the trigger; the scrolling columns are unaffected.

This is how you render a Czech, German, or any locale-specific time in the trigger while keeping the picker logic identical. Because formatTime only changes the trigger label, you can format display one way and still store the underlying Date however your backend expects — the selection and the display are fully decoupled.

When you want the lightweight browser time control instead of the scrolling dropdown, use TimePicker.Input. It wraps the native <input type="time"> inside Drivn's Input component, formats the selected Date into an HH:MM value string, and parses changes back into a Date on onSelect. On mobile this gives you the operating system's built-in time UI for free.

The same selected / onSelect contract applies, so swapping between the dropdown and the input is a one-line change — both speak Date. Use the input on dense settings pages or mobile-first forms where the native picker is faster, and the column dropdown where you want the styled, on-brand control. Add a Button beside either to submit the form.