如何在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添加一条错误消息，说明如果用户尝试选择的特定时间已经保留。

（但是，不要忘记在服务器端验证用户的条目。:)）