Home / Questions / 41388
Accepted
lucho
Asked: 2020-12-29 10:46:10 +0800 CST 2020-12-29 10:46:10 +0800 CST

How to disable jquery datepicker date range from start and end date

  • 772

I've been searching the net but I can't find anything that helps me to relate the PHP code with JavaScript to disable the date range in which a room is not available consulted from MySQL.

This is what I have so far

var disableddates = ["12-3-2016", "12-11-2016", "12-25-2016", "12-20-2016"];

  function DisableSpecificDates(date) {

   var m = date.getMonth();
   var d = date.getDate();
   var y = date.getFullYear();
   var currentdate = (m + 1) + '-' + d + '-' + y ;

   for (var i = 0; i < disableddates.length; i++) {


   if ($.inArray(currentdate, disableddates) != -1 ) {
   return [false];
   } 
   }

   return disableddates;
  }

  $(function() {
   $( "#datepicker").datepicker({
   beforeShowDay: DisableSpecificDates
   });
});

However this code is for specific dates not for an interval, for example my arrival date is 28/12/2016and my departure date is 31/12/2016, I need those three days to be blocked with only the interval.

javascript

1 Answers

  1. Best Answer

    disable the date range in which a room is not available

    What you need to do is first retrieve the dates and store them in JavaScript variables:

    var arrivalDate = moment("<?=$llegada?>", 'DD-MM-YYYY');
var departureDate = moment("<?=$salida?>", 'DD-MM-YYYY');

    Second, you must get the date range between the arrival and departure dates. For this I recommend you use moment .

    function getDatesBetween(start, end) {
  var dates = [];
  start.add(1, 'days'); // empezamos a contar 1 día después
  while (start < end) {
    dates.push(start.format('DD-MM-YYYY').toString());
    start.add(1, 'days');
  }
  return dates;
}

    Once this is done, you must create a function that checks if the current date is included among the dates to disable. This is necessary to disable those dates from the UI.

    function beforeShowDay(date) {
    if (!disabledDates.length) {
    disabledDates = getDatesBetween(arrivalDate, departureDate);
  }
  var currentDate = moment(date).format('DD-MM-YYYY');
  return [disabledDates.indexOf(currentDate.toString()) == -1];
}

    Fiddle Demo

    • 1