Time picker or date picker?

A date picker chooses a day on a calendar. A time picker chooses a clock time. Booking flows often need both as separate fields, or one datetime control that splits the two jobs clearly.

Match the locale and audience. US products often use 12-hour with AM and PM. European products often use 24-hour. Store values in 24-hour format in the data layer either way.

Should I use input type="time"?

It is the fastest path when the browser picker is good enough. Custom hour and minute selects give you control over minute steps and layout at the cost of more markup.

What minute steps make sense?

Every minute for precise scheduling. Every 5 or 15 minutes for appointments. Match what the backend accepts.

How do time zones fit in?

Show the zone beside the time when people in different regions edit the same record. Store UTC in the database and convert for display.

Can the time be empty?

Yes for optional fields. Required times should fail validation with a clear message on the group, not on hour alone.

Time picker

A time picker sets hours and minutes without choosing a calendar day. It answers when during the day, not which day.

Forms and inputBuild difficulty: Medium<input type="time">

Also called Time selector, Clock picker.

Start time

2:30 PM

Pick an hour and a minute from the lists. The summary below updates as you change either field.

For designers

A time picker answers a narrow question: what time on the clock. Calendar apps use one for event start, delivery windows use one for arrival, and admin tools use one when the date is fixed elsewhere.

The cost is locale. A native time input looks different on every platform. Custom hour and minute dropdowns look consistent but need more work for keyboard and screen readers. If the date matters too, pair this with a date picker or use a single datetime field with two clear parts.

Summarise the choice in words people expect. 14:30 as 2:30 PM beside the selects confirms the pick for 12-hour locales. A live region that updates when either select changes saves a glance back at the dropdowns.

Use a time picker when

Someone needs to set a time of day without changing the date
The value is hours and minutes, optionally with a time zone
Minute steps are fixed, like every 15 minutes for appointment slots

Reach for something else when

The person needs to pick a calendar day or a date range. Use a date picker instead.
Only two or three preset times are valid. Use a select instead.
The value is a duration in hours, not a clock time. Use a number field instead.
Start and end times belong in one continuous range on a timeline. Use a slider instead.

Variants

Native time input

One field when the browser picker is enough.

With time zone

A native time input for browsers that support it, and separate fields when you need to control the minute steps.

Hour and minute selects. Two dropdowns with a colon between. Full control over which minutes appear.

Native time input. One field, browser picker on supported devices. Fast to ship when the design system allows platform chrome.

With time zone. A third select or label for GMT, EST or the user's local zone.

How to build a time picker

A native time input is the baseline. Custom pickers use two selects or spin buttons inside a group with one label.

<fieldset>
  <legend>Start time</legend>
  <label for="hour">Hour</label>
  <select id="hour" name="hour">
    <option value="09">09</option>
  </select>
  <span aria-hidden="true">:</span>
  <label for="minute">Minute</label>
  <select id="minute" name="minute">
    <option value="00">00</option>
    <option value="30">30</option>
  </select>
</fieldset>
<p aria-live="polite">9:00 AM</p>

Tab moves through hour then minute. Update the summary text when either value changes. For type="time", the value string is HH:MM in 24-hour form. Convert for display if you show 12-hour copy beside it.

Appointment booking often limits minutes to 00, 15, 30 and 45. Fewer options in the minute list mean fewer mistakes than a free minute field with validation after the fact.

Edge cases

End before start. Validate pairs of times on the same day and explain the fix in plain language.

Midnight and noon. In 12-hour UI, make AM and PM explicit. 12:00 AM and 12:00 PM confuse people every year.

Disabled times. Grey out past slots in a booking UI rather than letting someone pick and error on submit.

Crossing midnight. A shift from 22:00 to 06:00 spans two calendar days. Collect the date separately or use one datetime control so the backend receives one unambiguous instant.

Duration versus clock time. A meeting length of 90 minutes is a duration. A start time of 14:00 is a clock time. Do not use a time picker for both jobs without relabelling the field.

Common questions

Time picker or date picker?: A date picker chooses a day on a calendar. A time picker chooses a clock time. Booking flows often need both as separate fields, or one datetime control that splits the two jobs clearly.
12-hour or 24-hour?: Match the locale and audience. US products often use 12-hour with AM and PM. European products often use 24-hour. Store values in 24-hour format in the data layer either way.
Should I use input type="time"?: It is the fastest path when the browser picker is good enough. Custom hour and minute selects give you control over minute steps and layout at the cost of more markup.
What minute steps make sense?: Every minute for precise scheduling. Every 5 or 15 minutes for appointments. Match what the backend accepts.
How do time zones fit in?: Show the zone beside the time when people in different regions edit the same record. Store UTC in the database and convert for display.
Can the time be empty?: Yes for optional fields. Required times should fail validation with a clear message on the group, not on hour alone.

Last reviewed 27 AUG 2026