javascript - HTML input type="time" only allow 15 min intervals - Stack Overflow

admin管理员组

文章数量:1279220

I am looking at having a time picker in my app and came across:

<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>

I am looking at having a time picker in my app and came across:

<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>

What I want is minutes to only show 15 min intervals. So 00, 15, 30 and 45.

After reading the documentation the input type has a property call Step:

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

So I have set it to 900 (60*15), but it still does not limit the selection.

Anyone give me some pointers on this?

• javascript
• html

Share Improve this question Follow edited Jan 26, 2021 at 15:08 Zsolt Meszaros 23.2k1919 gold badges5757 silver badges6969 bronze badges asked Jan 26, 2021 at 13:36 gilesrpagilesrpa 1,06111 gold badge1515 silver badges4141 bronze badges 1

• If i'm not mistaken the step property wont limit the user from inputing a value without the correct interval but it will make the form invalid. If you want it to only show every 15 minutes you have to use some JavaScript solution. – alapaah Commented Jan 26, 2021 at 13:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Diving into the Mozilla docs I found

https://developer.mozilla/en-US/docs/Web/HTML/Element/input/time#using_the_step_attribute

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.

So I tried step=900 in Chrome, but apparently they also removed the arrows here. You can see the effect only if you try to select a time with the arrows on your keyboard.

So I would remend you to build your time selection with the select field.

<select id="hours"></select>
<select id="minutes"></select>

<script>

       function createOption(value, text) {
              var option = document.createElement('option');
              option.text = text;
              option.value = value;
              return option;
       }

       var hourSelect = document.getElementById('hours');
       for(var i = 8; i <= 18; i++){
              hourSelect.add(createOption(i, i));
       }

       var minutesSelect = document.getElementById('minutes');
       for(var i = 0; i < 60; i += 15) {
              minutesSelect.add(createOption(i, i));
       }
</script>

This is just an idea how to implement this. You do not have to use javascript, I just wanted to show, how you can make it configurable. Now just parse and validate the values from the select and you are done!

本文标签： javascriptHTML input typequottimequot only allow 15 min intervalsStack Overflow