jquery datepicker multiple min max dates

Question

I am having a bit of trouble with jQuery datepicker. I need multiple ranges for date selection. For example user should be able to select a range between(d-m-y) 1/8/2015 and 5/8/2015. But also a range between: 16/8/2015 to 20/8/2015 (in the same calendar). The dates that do not match those ranges should be inactive. I ended up trying following code but with no success:

    $(function() {    
    var ds = array('1-8-2015', '16-8-2015'),
        de = array('5-8-2015', '20-8-2015');

    $('#datepicker').datepicker({
        beforeShow: function() {
            return {
                dateFormat: 'd-m-yy',
                minDate: ds,                
                maxDate: de,

            }
        }
    });
});

JSFiddle example: JSfiddle

Any ideas? Regards, Simon

Thanks for your ultra fast response. However my question is a bit different :) — simon
– simon, Commented Aug 29, 2015 at 17:37

Community · Accepted Answer · 2017-05-23 12:14:42Z

2

Well yes.. You can do it.. You can make use of beforeShowDay option of datepicker as below:

var d1s = new Date(2010, 8, 1),
    d1e = new Date(2010, 8, 5),
    d2s = new Date(2010, 8, 16),
    d2e = new Date(2010, 8, 20);
$(function() {
  $("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(date) {
      return [(date >= d1s && date <= d1e || date >= d2s && date <= d2e), ''];
    },
    minDate: d1s,
    maxDate: d2e
  });
});

Source

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 29, 2015 at 17:37

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

6 Comments

simon Over a year ago

Ain't it possible without having to define the variable number? What I forgot to mention was that the dates is dynamically generated via PHP so I don't know how many dates there is. That's why a array would be preferable if possible :)

Guruprasad J Rao Over a year ago

Let me try my best to meet your requirement.. :)

simon Over a year ago

Example: daystart: ['1-8-2015', '15-8-2015'], dayend ['5-8-2015', '20-8-2015'] :)

Guruprasad J Rao Over a year ago

Am sorry to say buddy.. But there isn't any such option in jquery datepicker to loop array in beforeShowDay which itself will form a loop.. There might be some plugins available in google for this particular requirement and I tried my best to achieve in all possible ways but did not find any way to pass array incrementally..

simon Over a year ago

So there is no way to set multiple ranges? That sounds weird :/

|

Collectives™ on Stack Overflow

jquery datepicker multiple min max dates

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related