HTML5 时间选择器分钟在下拉列表中仅显示 15 分钟间隔数据答案

【问题标题】：HTML5 time picker minutes to display only 15 minutes interval data in dropdownHTML5 时间选择器分钟在下拉列表中仅显示 15 分钟间隔数据
【发布时间】：2021-02-23 02:42:22
【问题描述】：

我试图在几分钟内只显示 4 个下拉列表

但无法通过它。我尝试添加步骤，但它仅适用于上下键。我想要的也是从下拉列表中隐藏它。可能吗？需要帮忙。尝试使用 css 隐藏，但可以成功。

PS：我一直在使用<input type="time">，如果可能的话，没有其他库。

【问题讨论】：

您是在询问 <input type="time"> 时间选择器还是另一个框架/库/包/等中包含的时间选择器...？
抱歉，忘记提及了。是的，我说的是<input type="time">

标签： html time timepicker

【解决方案1】：

各种input 类型的实现留给浏览器。这是为了允许跨操作系统和设备类型使用不同的标准。不幸的是，这也意味着您将受制于浏览器供应商来实现对您想要使用的所有选项的支持。

有一个step 属性可用于向上舍入到最接近的所需间隔，但正如usage documentation 所指出的那样，

这个属性在浏览器之间有一些奇怪的效果，所以并不完全可靠。

理想情况下，定义间隔之间的最小步长需要几秒钟。 15 分钟就是 900 秒。

&lt;input type="time" value="09:00" step="900"&gt;

此功能在最近的更新中似乎是adopted，但您的里程可能会有所不同。

由于下拉菜单是特定于浏览器的，我不知道有什么方法可以限制它显示的值。如果您需要这种级别的控制，或者如果您需要定位不支持此属性的浏览器，那么您将需要一个自定义控件。

或者，您可以侦听input 的change 事件并以编程方式四舍五入到最接近的15 分钟。这只是一个例子。您绝对会遇到时区、时间格式以及其他可能无法预料的问题。

window.onload = function () {
  let myTimepicker = document.getElementById("my-timepicker");
  myTimepicker.addEventListener("change", function() {
  
    console.log(`User changed the value to ${myTimepicker.value}`);
    
    let [hours, minutes] = myTimepicker.value.split(":");
    
    minutes = (Math.ceil(minutes / 15) * 15);
    if (minutes == 0) minutes = "00";
    if (minutes == 60) { minutes = "00"; ++hours % 24; }
        
    let newValue = hours + ":" + minutes;
    
    console.log(`Rounding value to ${newValue}`);
    
    myTimepicker.value = newValue;
  });
}

&lt;input type="time" id="my-timepicker"&gt;

【讨论】：