Time picker

Introduction

TimePicker subclasses DatePicker with type="time". Use it for opening hours, shift starts, and time-only preferences. Min/max accept time strings such as 09:00 / 17:30.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Basic time picker

Renders a browser time control. Dehydrated values follow the browser’s time string (often HH:MM).

TimePicker.make('opens_at')
    .label('Opens at')

Orbit Basic time picker (light)

Orbit Basic time picker (dark)

Bounded range

Constrain selectable times with .min_date() / .max_date() (same helpers as DatePicker — they emit min/max regardless of date vs time).

TimePicker.make('closes_at')
    .label('Closes at')
    .min_date('09:00')
    .max_date('17:00')

Orbit Bounded range (light)

Orbit Bounded range (dark)

Display format hint

.display_format() stores a client hint on data-display-format without server-side reformatting.

TimePicker.make('reminder_at')
    .label('Reminder')
    .display_format('H:i')

Orbit Display format hint (light)

Orbit Display format hint (dark)

Step and input mode

Inherited Field helpers .step() and .input_mode() emit attributes on the control when you need minute granularity or a numeric keypad. Pair with .required() for mandatory windows.

TimePicker.make('break_at')
    .label('Break')
    .step(300)
    .required()

Orbit Step and input mode (light)

Orbit Step and input mode (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.