Jquery datepicker disable multiple dates with range

Question

var check_in = ["Nov Thu 23, 2017","Nov Fri 24, 2017","Nov Mon 27, 2017"];

$('#check-in-date').datepicker({
dateFormat: 'M D d, yy',
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('M D d, yy', date);
    return [ check_in.indexOf(string) == -1 ]
}
});

This is my code I tried. Its working fine but my problem is I can only disable array dates. But I want to disable also Nov Thu 23, 2017 - Nov Mon 27, 2017

BTW array dates coming from a PHP loop.

can anybody please help me out.

Thanks.

Answer 1

This would support both single dates and pairs of start/end date ranges in your same check_in array:

var check_in = ["Nov Wed 22, 2017", ["Nov Sat 25, 2017", "Nov Tues 28, 2017"]];

$('#check-in-date').datepicker({
  dateFormat: 'M D d, yy',
  beforeShowDay: function(date) {
    var string = jQuery.datepicker.formatDate('M D d, yy', date);
    for (var i = 0; i < check_in.length; i++) {
      if (Array.isArray(check_in[i])) {
        var from = new Date(check_in[i][0]);
        var to = new Date(check_in[i][1]);
        var current = new Date(string);
        if (current >= from && current <= to) return false;
      }
    }
    return [check_in.indexOf(string) == -1]
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="check-in-date"></p>

UPDATE:

Based on comment clarification, this would block out the range from the first entry in the array through the last entry, assuming they are sorted chronologically as with the provided input:

var check_in = [
  ["Nov Thu 23, 2017", "Nov Fri 24, 2017", "Nov Mon 27, 2017", "Dec Thu 07, 2017", "Dec Sun 10, 2017", "Dec Sat 16, 2017", "Dec Sat 30, 2017", "Jan Sat 06, 2018", "Jan Wed 10, 2018", "Jan Sun 14, 2018", "Jan Mon 15, 2018", "Jan Mon 22, 2018", "Jan Wed 24, 2018", "Jan Mon 29, 2018", "Feb Fri 02, 2018", "Feb Tue 06, 2018", "Feb Wed 07, 2018", "Feb Mon 12, 2018", "Feb Fri 16, 2018", "Feb Mon 19, 2018", "Mar Fri 02, 2018", "Mar Mon 05, 2018", "Mar Thu 29, 2018", "Apr Mon 02, 2018", "Apr Wed 18, 2018", "Apr Sat 21, 2018"]
];



$('#check-in-date').datepicker({
  dateFormat: 'M D d, yy',
  beforeShowDay: function(date) {
    var current = new Date(jQuery.datepicker.formatDate('M D d, yy', date));
    var from = new Date(check_in[0][0]);
    var to = new Date(check_in[0][check_in[0].length - 1]);
    return [current < from || current > to]
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="check-in-date"></p>