如何在HTML时间格式中禁用/禁用特定时间

Question

我有一个预订表格，我想将已由客户选择的小时/时间灰显/禁用。

以便下一个人预定不同的时间。我不太确定如何实现这一目标。我已经看到了禁用时间范围示例，但我不知道如何将其链接到此表单并使它工作。我没有找到其他针对此问题的有用资源。

<div class="form-group">
    <label for="time">Time</label>
    <input type="time" name="time" class="form-control" required>
</div>

Answer 1

很遗憾，这不是<input type="time"> API的一部分。您可以为每个时间元素设置一个min=和max=，但这或多或少。

但是，您可以利用setCustomValidity() API来添加一条错误消息，指出如果用户尝试选择的特定时间已经被保留。

（但是，请不要忘记在服务器端也验证用户的输入。:)）