Step Attribute doesn't work for HTML input type "time"

Question

I want to have a time input field where users can only select full hours. In my example it would be 00:00, 01:00, 02:00 and so on. That is why I set the step attribute to 3600. Because 3600 seconds are equals to one hour. This is my code:

<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="00:00" step="3600">

This works when I use the arrow keys to select the time. But when I click on the hour icon inside the input field then I can select minutes as you can see in the picture below. What can I do so that the user can only select hours?

Answer 1

As others have stated, you should beware the limitation of step in terms of browser cross-compatibility. To quote the MDN Documentation...

In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).

In Firefox, there are no arrows, so the step value isn't used. However, providing it does add the seconds input area adjacent to the minutes section.

The steps value seems to have no effect in Edge.

(Source: MDN Documentation: Using time inputs.)

Since you only care about hours, why not use the list attribute? You will need to create a datalist element, but it's fairly straight forward and, with 24 hours in a day, that's only 24 child elements. Plus, you get to customize start/end times, and order it as you like.

  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" list="times" type="time" name="appt-time" value="00:00" step="3600">

<datalist id="times">
    <option value="01:00:00">
    <option value="02:00:00">
    <option value="03:00:00">
    <option value="04:00:00">
    <option value="05:00:00">
    <option value="06:00:00">
    <option value="07:00:00">
    <option value="08:00:00">
    <option value="09:00:00">
    <option value="10:00:00">
    <option value="11:00:00">
    <option value="12:00:00">
    <option value="13:00:00">
    <option value="14:00:00">
    <option value="15:00:00">
    <option value="16:00:00">
    <option value="17:00:00">
    <option value="18:00:00">
    <option value="19:00:00">
    <option value="20:00:00">
    <option value="21:00:00">
    <option value="22:00:00">
    <option value="23:00:00">
    <option value="00:00:00">
</datalist>

CAVEAT: This doesn't appear to work with Firefox, and it seems that FF allows little customizability here. But it works much better in Chrome. You may want to look for a different input type.