How can I disable / greyout specific hour in HTML time form

Question

I have a booking form and I want to grey-out/disable those hours/times that is selected by customers already.

So that the next person book a different time. I am not quite sure how to achieve this. I have seen disable time range example but I don't know how to link it to this form and make it work. I haven't found any other useful resources around targeting this issue.

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

Answer 1

Unfortunately that's not a part of the <input type="time"> API. You can set a single min= and max= per time element, but that's more or less it.

You could, however, maybe leverage the setCustomValidity() API to add an error message saying that the particular time chosen is reserved already if the user tries that.

(However, don't forget to validate the user's entry also on the server side. :) )