Jquery datepicker disable multiple dates with range

246
November 23, 2017, at 07:01 AM
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>

Answer 2

Use an array of starting and ending timestamps and check if the date is between them.

var check_in = [[1511395200 /* Nov 23 2017 */, 1511827199 /* Nov 27 2017 23:59:59 */]];
$('#check-in-date').datepicker({
    dateFormat: 'M D d, yy',
    beforeShowDay: function(date){
        var timestamp = date.getTime()/1000;
        for (var i = 0; i < check_in.length; i++) {
            if (timestamp >= check_in[i][0] && timestamp <= check_in[i][1]) {
                return false;
            }
        }
        return true;
    }
});

To black out a single date, make the date range from 00:00 to 23:59:59 on that date.

Rent Charter Buses Company
READ ALSO
How to make an animation using an array of images

How to make an animation using an array of images

I am wondering whether there is a simple way that I can convert my numpy array of images to a single video?

236
How do you create a 2-D array from a list oif 2-tuples of strings

How do you create a 2-D array from a list oif 2-tuples of strings

I am trying to do a gaussian HMM evaluation on a set of NER data for finding genesThe training data looks like the following-

252
Timer that doesn&#39;t want to start with GPIO button

Timer that doesn't want to start with GPIO button

I have a timer that I can start with either a start/stop button on the screen or two GPIO buttons

274