Question

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

00
15
30
45

但是没能熬过去。我尝试添加步骤，但它仅适用于上下键。我想要的是从下拉列表中隐藏它。是否有可能？需要帮忙。试图使用 css 隐藏，但可以做到。

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

Answer 1

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

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

<块引用>

这个属性对浏览器有一些奇怪的影响，所以并不完全可靠。

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

<input type="time" value="09:00" step="900">

此功能在最近的更新中似乎是 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;
  });
}

<input type="time" id="my-timepicker">

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

1 个答案: