Step Attribute doesn't work for HTML input type

user_9843082 0
Viewed 4177

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?

enter image description here

validation forms html javascript
2 Answers

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.

user_24305490

As you are only interested in getting an hour from the user how about doing something really simple using a list of radio input elements?

That way you can style things just as you like and you aren't having to worry about the fact that different browsers will show a type time input element in different ways - you can create a consistent user interface across browsers.

<br><input type="radio" name="time" value=0> 0
<br><input type="radio" name="time" value=1> 1
<br><input type="radio" name="time" value=2> 2

...

well, with additional CSS and JS of course to make it look and do what you want. And you only need to show the times that appointments can be made (e.g. maybe not 00.00 hours?)

user_108674540
Related