javascript - HTML 输入类型 ="time"只允许 15 分钟间隔

Question

我正在寻找在我的应用程序中有一个时间选择器并遇到:

<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>

我想要的是只显示 15 分钟间隔的分钟。所以 00、15、30 和 45。
看完 documentation输入类型有一个属性调用步骤:

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.

所以我把它设置为900(60*15)，但仍然不限制选择。
有人给我一些指示吗？

Answer 1

深入了解我发现的 Mozilla 文档
https://developer.mozilla.org/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.

所以我在 Chrome 中尝试了 step=900，但显然他们也删除了这里的箭头。只有当您尝试使用键盘上的箭头选择时间时，您才能看到效果。
因此，我建议您使用选择字段来构建您的时间选择。

<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>

这只是一个如何实现的想法。您不必使用 javascript，我只是想展示如何使其可配置。现在只需解析并验证 select 中的值，您就完成了!