How to block multiple date ranges in jQuery Datepicker ui

Question

I have this code to go on, but what I would like is have these dates being blocked instead of enabled. So just the other way round. Anyone in the know of how to do this based on this code? Thanks a million!

var ranges = [ { start: new Date(2010, 8, 1), end: new Date(2010, 8, 20) },
               { start: new Date(2010, 9, 1), end: new Date(2010, 9, 20) },
               { start: new Date(2010, 10, 1), end: new Date(2010, 10, 20) } ];

$(function() {
  $("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(date) {
        for(var i=0; i<ranges.length; i++) {
          if(date >= ranges[i].start && date <= ranges[i].end) return [true, ''];
        }
        return [false, ''];
    },
    minDate: ranges[0].start,
    maxDate: ranges[ranges.length -1].end
  });
});

Also, my dateformat is dd-mm-yy. I am a bit puzzled about date formats.

Joseph Marikle · Accepted Answer · 2016-05-10 13:36:05Z

4

You need to reverse the logic by changing return [true, ''] and return [false, ''] to return [false, ''] and return [true, ''] respectively. You also need to remove minDate: ranges[0].start and maxDate: ranges[ranges.length -1].end

Here's a demo (I've changed the dates slightly to make it easier to see the effect. Just go forward to September 2016).

var ranges = [ { start: new Date(2016, 8, 1), end: new Date(2016, 8, 20) },
               { start: new Date(2016, 9, 1), end: new Date(2016, 9, 20) },
               { start: new Date(2016, 10, 1), end: new Date(2016, 10, 20) } ];

$(function() {
  $("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(date) {
        for(var i=0; i<ranges.length; i++) {
          if(date >= ranges[i].start && date <= ranges[i].end) return [false, ''];
        }
        return [true, ''];
    }
  });
});

@import url(https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="datepicker">

Edit

Just a quick edit here to address the date issue. Your date format is a non-standard d(d)-m(m)-yyyy. You can get it to a standard format pretty easily by converting it to an array, having the values [day,month,year] as numeric strings (e.g. ["4", "27", "2016"] for 27-4-2016). Here's a snippet to do that

// our date-like string and an array equivalent
var d = '27-4-2016',
    dArray = d.split('-');
// rearrange the month and day
dArray.splice(1, 0, dArray.shift());
// create a date object called date and pass our array to the constructor
var date = new Date(dArray); // Result: Wed Apr 27 2016 00:00:00 GMT-0500 (CDT)

edited May 10, 2016 at 13:36

answered Apr 25, 2016 at 19:33

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

2 Comments

ItsMagic Over a year ago

Hi Joseph, that's great! I just see your answer, but you really answered this one with lightspeed! And what about the date format? My date format is like: d-m-yy, like 27-4-2016

Joseph Marikle Over a year ago

@ItsMagic I'll add an edit to my answer to address the date format issue.

kung myat · Accepted Answer · 2025-03-07 19:29:14Z

0

var ranges = [ { start: new Date(2016, 8, 1), end: new Date(2016, 8, 20) },
               { start: new Date(2016, 9, 1), end: new Date(2016, 9, 20) },
               { start: new Date(2016, 10, 1), end: new Date(2016, 10, 20) } ];

$(function() {
  $("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(date) {
        for(var i=0; i<ranges.length; i++) {
          if(date >= ranges[i].start && date <= ranges[i].end) return [false, ''];
        }
        return [true, ''];
    }
  });
});

@import url(https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="datepicker">

answered Mar 7 at 19:29

kung myat

11 bronze badge

1 Comment

Community Mar 7 at 20:37

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to block multiple date ranges in jQuery Datepicker ui

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related