TimePicker
You might say
Let people choose the time instead of typing it themselves.
Choose a specific time within allowed hoursA time picker lets people choose hours and minutes, and sometimes seconds. Make the 12-hour or 24-hour format clear, define the minute step, and show which times are unavailable.
Know first
When to use it
- Appointment time
- Reminder time
- Business hours
- Schedule with fixed time steps
When NOT to use it
- Ask for seconds when that precision is not useful
- Mix 12-hour and 24-hour formats
- Offer unavailable times and reject them later
- Hide the relevant time zone
Anatomy
14:30131415
Shows the selected time
Scrollable columns for hours and minutes
An available time
The selected time, highlighted in the center
Variants
24-hour
131415
:003045
When meetings and scheduled tasks need an unambiguous time format
Range
09:00
→18:00
Choose a start and end time
12-hour
010203
:3045
AMPM
When users prefer AM/PM time
Step
09:0009:3010:0010:30
When availability is limited to approved time slots
Typical use cases
Meeting booking
New meeting
Time
14:30
Today · About 1 hour
131415
:
003045
Reminder
Business hoursOutside of the time, the store automatically displays "Closed"09:00→21:30
Lunch breakNo order taking during this period12:00→13:30
Store hours
Daily push
Every day 08:30 Push to all members
Next push: tomorrow 08:30
Scheduled task
07:30Workday · Get up
09:00Weekend · Morning Run
+ Add alarm
Further reading