如何让 datetime-local 输入框默认将分钟设为 00-html教程-PHP中文网

如何让 datetime-local 输入框默认将分钟设为 00

通过设置 step="3600" 属性，可强制的分钟值始终以整点（:00）为粒度进行选择，从而确保用户选定的时间分钟部分恒为 00。

通过设置 `step="3600"` 属性，可强制 `` 的分钟值始终以整点（:00）为粒度进行选择，从而确保用户选定的时间分钟部分恒为 00。

在 HTML 表单中使用 <input type="datetime-local"> 时，若希望用户只能选择“整点时间”（即分钟固定为 00），最简洁、语义正确且无需 JavaScript 干预的方案是利用原生 step 属性。

step 属性用于定义输入值的合法间隔，单位为秒。对 datetime-local 类型而言：

step="1"（默认）：允许选择任意秒级精度（如 14:27:35）；
step="60"：限制到分钟级（如 14:27），但分钟仍可为任意值；
✅ step="3600"：表示每 3600 秒（即 1 小时）为一个有效步长，浏览器会自动将分钟对齐至 :00，例如用户点击 14:27，实际输入值将被修正为 14:00；同理，09:45 → 09:00。

✅ 正确用法如下：

<input type="datetime-local" name="datetime_regular_start" id="datetime_regular_start" step="3600" required>

⚠️ 注意事项：

浏览器兼容性有限：该行为在 Chromium 内核浏览器（Chrome、Edge、Opera）中稳定支持；Firefox 当前（截至 v128）不支持 step 对 datetime-local 的分钟约束，会忽略该属性；
step 不影响初始 value 的格式，仅约束用户交互后的取值逻辑；

若需全浏览器兼容，必须配合 JavaScript 监听 change 或 input 事件，手动归零分钟（示例）：

const input = document.getElementById('datetime_regular_start');
input.addEventListener('change', () => {
  if (input.value) {
    const date = new Date(input.value);
    date.setMinutes(0, 0, 0); // 清零分钟、秒、毫秒
    input.value = date.toISOString().slice(0, 16); // 格式：YYYY-MM-DDTHH:MM
  }
});