HTML5时间选择器分钟只显示15分钟间隔数据下拉

Question

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

1. 00
15
30
45

但无法通过。我试着添加步骤，但它只适用于上下键。我想把它从下拉菜单中隐藏起来。这可能吗?需要帮助。试图隐藏使用css，但它可以。

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

Answer 1

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

有一个step属性可用于舍入到最接近所需的间隔，但正如使用文档所述，

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

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

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

此功能似乎已在最近的更新中采用，但您的实际情况可能会有所不同。

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

或者，您可以侦听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">