Click here to Skip to main content
15,882,464 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
So I have this form with a input type date. users can choose a check in date and a check out date. this works but now I want to tinker into the input type date and make the dates that are available to book green and the dates that aren't have to be red. my question is: how do I do this?

this is an example of what I currently have
<pre>            <div class="information mb-3">
                    <div class="check in mb-3">
                        <label for="checkIn" class="form-label">Check in </label> 
                        $sql = "SELECT * FROM reserveringen";
                        $stmt = $conn->prepare($sql); 
                        $result = $stmt->get_result();
                        while ($row = mysqli_fetch_assoc($result)) {
                            echo $row['start_datum']; //start date
                            echo $row['eind_datum']; //end date
                        <input type="date" class="form-control"  id="checkInDate"/> 

What I have tried:

 I have been looking on the internet but I must not be able to explain myself the right way because it only tells me 
<pre><input type="date" class="form-control" id="checkOutDate"/> 

but I already have that.
I know I need a db where I have all the reserved dates and I have that already. I also already have a db connection I just don't understand how I should mix the two
Updated 17-May-22 0:17am
Richard MacCutchan 17-May-22 6:10am    
You need some flag in your database (or a separate table) that identifies the available dates. You then need to display them in some table or list, so the user can make their selection. The standard date control does not offer such a feature but you may find a custom version that would help.

You have very little control over the date input UI. You can set the minimum and maximum dates; you can use the step attribute to only enable every N days; but you can't block out or highlight specific dates in the calendar, even on browsers which display a calendar.

If you need to customize the UI, you'll need to use a custom component. For example, I've used Litepicker[^] in a couple of projects.
Share this answer
There is one here on CodeProject which may be of use: HTML5 Event Calendar/Scheduler[^].
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900