Wheel Picker vs. Time Field vs. Clock Dial

/ <input type="time"> · UIDatePickerStyle.wheels /

also called time picker, picker wheel, slot machine picker, spinning wheel picker, dial time picker, time input

“A scrollable wheel” you spin to pick a time is a wheel picker (UIDatePicker in the .wheels style), the iOS slot-machine drum where the chosen row sits inside a gray band, as in the iPhone Clock app's alarm screen. On the web the usual control is a time field (<input type="time">): a typed box split into hour, minute and AM/PM segments, where arrow keys change the focused one. The clock dial is a round face where you drag a hand to the hour, then the minute (Jetpack Compose TimePicker, MUI's mobile picker). A date picker is the calendar grid: it picks days, not times.

If you called it…

“a scrollable wheel component, usually used for date picker”“scrolling clock”“gauge dial selector”“시간 다이얼”“时间选择框精确到年月日时分”“numbers you spin up and down with a gray bar across the middle”“the round clock face where you drag a line to the hour”

…you meant Wheel Picker vs. Time Field vs. Clock Dial.

Anatomy — every part, named

1
Selection band
“The gray bar across the middle of the wheel” is the selection band, also called the selection indicator: whatever row sits inside it is the chosen value.
2
Focused segment<input type="time">
“The highlighted number inside the time box” is the focused segment: arrow keys change only that part, the hour, minute or AM/PM.
3
Clock handTimePicker (Jetpack Compose) · TimeClock (Material UI)
“The line with a dot on the number” is the clock hand, the handle Material moves around the dial: drag it to the hour, then the minute.

Prompt — paste into your agent

Build a time picker that fits the platform: on the web a time field (<input type="time">) split into hour, minute and AM/PM segments that arrow keys change; on iOS a wheel picker (UIDatePicker with .wheels; SwiftUI: .datePickerStyle(.wheel)) with the chosen row inside the gray selection band; on Android a clock dial (Jetpack Compose TimePicker). Store the time as 24-hour HH:mm and only display 12-hour.

Debug prompt — when it misbehaves

Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.

Debug my time picker (<input type="time">, UIDatePicker .wheels, Jetpack Compose TimePicker, MUI TimeField / TimeClock). Rule out: the value parsed as 12-hour text when <input type="time"> always returns 24-hour HH:mm; noon and midnight swapped because 12 is treated as 0; a time stored as a full Date and shifted by a time zone or daylight saving change; a custom wheel stopping between rows because it never snaps; arrow keys dead because custom segments are not focusable; the dial hand swinging the long way around past 12. The symptom:

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

HTML	`<input type="time">`	the value is always 24-hour HH:mm
UIKit	`UIDatePickerStyle.wheels`	iOS 13.4+, the spinning wheel
SwiftUI	`.datePickerStyle(.wheel)`	iOS 13+ and watchOS 10+, not macOS
Jetpack Compose	`TimePicker`	the clock dial; TimeInput is the typed version
Material UI	`<TimeClock />`	the dial; <TimeField /> is the typed box
AppKit	`NSDatePicker.Style.clockAndCalendar`	the macOS style with a clock face

If you called it…

Anatomy — every part, named

Prompt — paste into your agent

Debug prompt — when it misbehaves

In code

See also