如何禁用HTML time输入框的分钟选择或固定分钟为xx:00

方法1：使用HTML原生step属性锁定整小时 #

原生time输入框的step属性可定义时间选择间隔，设置为3600（对应1小时，即3600秒）后，只能选择分钟为00的整小时时间，分钟选择器会被限制无法调整。

代码示例：

<input id="appt-time" type="time" name="appt-time" value="13:00" step="3600" />

方法2：JavaScript强制分钟为00 #

通过监听输入事件，实时将分钟部分重置为00，确保无论用户如何操作，最终值都是xx:00格式。

代码示例：

const timeInput = document.getElementById('appt-time');

// 初始化时修正为xx:00格式
if (timeInput.value) {
  const [hour] = timeInput.value.split(':');
  timeInput.value = `${hour}:00`;
}

// 监听输入变化，强制分钟为00
timeInput.addEventListener('input', () => {
  const [hour] = timeInput.value.split(':');
  timeInput.value = `${hour}:00`;
});

方法3：视觉隐藏分钟选择器（需配合功能限制） #

通过CSS隐藏分钟选择区域，注意这只是视觉层面的处理，需搭配前面的方法（如step属性或JS控制）确保功能上锁定分钟，避免用户通过键盘修改。

代码示例：

/* WebKit内核浏览器（Chrome/Edge等） */
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  display: none;
}

/* Firefox浏览器 */
input[type="time"] {
  -moz-appearance: textfield;
}
input[type="time"]::-moz-time-picker {
  display: none;
}

内容的提问来源于stack exchange，提问作者Ostap Filipenko