Estoy trabajando en un sitio web similar a un sistema de reserva de hotel. Los usuarios pueden reservar una habitación utilizando el sitio web.
Estas son las fechas no disponibles:
['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']
En mi selector de fecha, deseo hacer esto:
Mi JS actual:
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-cc"> Rates </div> <div class="C_rcTopBox flex-cc"> <label>Check-In Date</label> <input type="text" id="listingCheckIn" name="checkin" class="date"> </div> <div class="C_rcTopBox flex-cc"> <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>Básicamente, 1 y 2 es una oportunidad, pero ¿cómo logro 3 para que un usuario deba realizar el check-out antes del check-in de otras reservas? Gracias por adelantado.