如何在HTML时间表单中禁用/灰显特定小时

在HTML时间表单中禁用或灰显特定小时，可以通过以下步骤实现：

使用HTML的<input>元素创建时间表单字段。设置type属性为"time"，并为该元素添加一个唯一的id属性，以便在后续的JavaScript代码中引用。

<input type="time" id="timeInput">

在JavaScript中获取对时间表单字段的引用，并定义要禁用或灰显的小时。

var timeInput = document.getElementById("timeInput");
var disabledHours = [9, 12, 15]; // 要禁用或灰显的小时

创建一个函数，用于检查用户选择的小时是否需要禁用或灰显。在该函数中，获取用户选择的小时，并与要禁用或灰显的小时进行比较。

function checkDisabledHours() {
  var selectedHour = parseInt(timeInput.value.split(":")[0]);
  
  if (disabledHours.includes(selectedHour)) {
    timeInput.setCustomValidity("该小时不可选"); // 设置自定义验证消息，禁用该小时
  } else {
    timeInput.setCustomValidity(""); // 清除自定义验证消息，启用该小时
  }
}

在时间表单字段上添加一个事件监听器，以便在用户选择小时时调用上述函数。

timeInput.addEventListener("input", checkDisabledHours);

完整的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>禁用特定小时</title>
</head>
<body>
  <form>
    <label for="timeInput">选择时间：</label>
    <input type="time" id="timeInput">
  </form>

  <script>
    var timeInput = document.getElementById("timeInput");
    var disabledHours = [9, 12, 15]; // 要禁用或灰显的小时

    function checkDisabledHours() {
      var selectedHour = parseInt(timeInput.value.split(":")[0]);

      if (disabledHours.includes(selectedHour)) {
        timeInput.setCustomValidity("该小时不可选"); // 设置自定义验证消息，禁用该小时
      } else {
        timeInput.setCustomValidity(""); // 清除自定义验证消息，启用该小时
      }
    }

    timeInput.addEventListener("input", checkDisabledHours);
  </script>
</body>
</html>

这样，当用户选择被禁用或灰显的小时时，表单字段将显示一个验证错误消息，并阻止表单的提交。