1 
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.

Improve this question
3
  • Instead of putting formatted dates into the array, put pairs of starting and ending timestamps. Then you can loop through the array, testing if date is between the timestamps. Commented Nov 22, 2017 at 19:33
  • can you please give me an example of code how to add the condition between the timestamp. @Barmar Commented Nov 22, 2017 at 19:40
  • if (date >= starttime && date <= endtime) return true; Commented Nov 22, 2017 at 19:46

2 Answers 2

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

the problem is my array looks like: 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"]];
want to disable from "Nov Thu 23, 2017" to "Apr Sat 21, 2018" @emshore
Oh, ok that's a different question than I had understood. This would actually be simpler then, I will update my code.
thanks, man please update. I tried to use min and max values but it only visible Nov Thu 23, 2017 to Apr Sat 21, 2018 but I want to disable this range of dates. @emshore
thanks. perfect solution. one question if I have an array like this [["Nov Thu 23, 2017","Nov Fri 24, 2017","Nov Mon 27, 2017","Dec Thu 07, 2017","Dec Mon 11, 2017","Dec Sat 16, 2017"]] then all dates should be disable except "Dec Sun 10, 2017". how is it possible? @emshore
|
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.

Improve this answer

3 Comments

The question seemed to indicate a desire to support date ranges in addition to single dates - "But I want to disable also" a date range. Perhaps this can be clarified. I believe my solution accounts for either option, but feel free to comment if I missed anything.
In my code, you implement a single date simply by using the timestamp range from 00:00 to 23:59:59 on that date.
Yup, that would work. I stand corrected, nice solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.