Im working on a website similar to a hotel reservation system. Users are allowed to book a room using the website.
These are the unavailable dates:
['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']
In my datepicker, I wish to do these:
My current JS:
const dateCheck = ['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']
function disableDates(date) {
var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
return [dateCheck.indexOf(string) == -1]
}
$("#listingCheckIn").datepicker({
beforeShowDay: disableDates,
minDate: 0,
dateFormat: "yy-mm-dd",
showOn: "both",
//upon selection
onSelect: function(dateText, inst) {
$("#listingCheckOut").datepicker("option", "minDate",
$("#listingCheckIn").datepicker("getDate")); //2nd datepicker to set min value for 1st datepicker
}
});
$("#listingCheckOut").datepicker({
beforeShowDay: disableDates,
minDate: 0,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$("#listingCheckOut").datepicker("option", "minDate",
$("#listingCheckIn").datepicker("getDate")); //2nd datepicker to set min value for 1st datepicker
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<form action="booking.php" id="bookingForm" method="post">
<div id="C_rightColumn">
<div class="C_rcTopBox flex-c-c">
Rates
</div>
<div class="C_rcTopBox flex-c-c">
<label>Check-In Date</label>
<input type="text" id="listingCheckIn" name="checkin" class="date">
</div>
<div class="C_rcTopBox flex-c-c">
<label>Check-Out Date</label>
<input type="text" id="listingCheckOut" name="checkout" class="date">
</div>
<div class="C_rcBtmBox">
<button type="submit" class="btn" name="bookProperty">Book Now!</button>
</div>
</div>
</form>Basically, 1 and 2 is a go, but how do I achieve 3 so that a user must check out before the check-in of other bookings? Thanks in advance.