如果在选项中选择，则禁用特定时间选项<input type="date">

Question

hello how can I disable the time from option tag when a certain date is selected in input date tag? Example is if 8:00 - 10:00 is taken on august 22, 2022, the option 8:00 - 10:00 is disabled on the same date and not on others. Here is the current code..

    <label for="date">Date:</label>
    <input type="date" name="date" id="date" min="<?php echo date("Y-m-d"); ?>" required/><br>
    <label for="time">Choose an appointment time: </label><br>
    <select name="time" id="time" ><br>
    <?php
    $sql2 = "SELECT * FROM time";
    $result2 = $conn->query($sql2);

    while($rows2=$result2->fetch_assoc())
    {
    <option value = "<?php echo $rows2['time']; ?>"><?php echo $rows2['time']; ?></option>
    <?php
    }
    ?>
    </select>

Answer 1

Your code is selecting all time values from the database in one call rather than date specific.

There's a lot of ways this could be tackled, for example,

1. jQuery/AJAX - Used to fetch the times available based on the date selected
2. Javascript - Used to show only specific options once a date is selected
3. Multi-Step Form - Ask for a date first, once submitted, then provide the times available

Here's an example for version 2 from another question that has a similar challenge.

Change <select> options with javascript dynamically

It's worth noting, in their example the values are hardcoded, whereas in your case you'll need to dynamically create the javascript function.