CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
greener
greener

Reputation: 5069

jQuery datepicker highlight range loop

I would like to highlight date ranges on a jQuery datepicker. 

  var dates = new Array();
  dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
  dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];

  $(function() {
    $('#datepicker').datepicker({
        numberOfMonths: 1,
        minDate: '-0m',
        beforeShowDay: function (date) {
            for (i=0;i<dates.length;i++) {
                var date1 = dates[i][0];
                var date2 = dates[i][1];
                return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
            }
        }
    })
  });

The above doesn't work since only one range is visible. How can I get a loop going so that it highlights more than one range? Thanks for your help!

Fiddle

Upvotes: 0

Views: 861

Answers (2)

ajimenez
ajimenez

Reputation: 175

The problem is that you have the return inside the loop for that reason on the end of the first loop the function is returning true or false

You should do something like:

var dates = new Array();
  dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
  dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];

  $(function() {
    $('#datepicker').datepicker({
        numberOfMonths: 1,
        minDate: '-0m',
        beforeShowDay: function (date) {
            var bool = true;
            for (i=0;i<dates.length;i++) {
                var date1 = dates[i][0];
                var date2 = dates[i][1];
                bool = bool && date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : "";
            }
            return bool;
        }
    })
  });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

var dates = new Array();
dates[0] = [new Date(2014, 2, 23), new Date(2014, 2, 30)];
dates[1] = [new Date(2014, 2, 13), new Date(2014, 2, 20)];

$(function () {
    $('#datepicker').datepicker({
        numberOfMonths: 1,
        minDate: '-0m',
        beforeShowDay: function (date) {
            var flag = false,
                date1, date2, i;
            for (i = 0; i < dates.length; i++) {
                date1 = dates[i][0];
                date2 = dates[i][1];

                flag = (!date1 || date.getTime() >= date1.getTime()) && (!date2 || date.getTime() <= date2.getTime())
                if (flag) {
                    break;
                }
            }
            return [true, flag ? "dp-highlight" : ""];
        }
    })
});

Demo: Fiddle

Upvotes: 1

Related Questions