Question

I am working on an asp.net application where i need to disable certain dates fetched from database.

Below script on jsFiddle Works while it only highlights the specific date but deosn’t disable the date as it is still click-able.

HTML:

<input id="txtBookDate" type="text" />

JavaScript:

var holiDays = [[2012, 06, 06, 'New Years Day'], [2012, 06, 14, 'Pongal'], [2011, 12, 25, 'Christmas Day']];
$(function () {
    $('#txtBookDate').datepicker({
        dateFormat: "yy-mm-dd",
        minDate: "+2d",
        maxDate: "+30d",
        beforeShowDay: setHoliDays
    });

    // set holidays function which is configured in beforeShowDay
    function setHoliDays(date) {
        for (i = 0; i < holiDays.length; i++) {
            if (date.getFullYear() == holiDays[i][0]
      && date.getMonth() == holiDays[i][1] - 1
      && date.getDate() == holiDays[i][2]) {
                return [true, 'holiday', holiDays[i][3]];
            }
        }
        return [true, ''];
    }
});

http://jsfiddle.net/Skjrn/14/

I would appreciate if someone can fix this as make mentioned in the array not click-able.

Regards

Answer 1

It’s because your passing true as the first param when checking for the holiday.

see http://jsfiddle.net/gRoberts/Skjrn/16/

    function setHoliDays(date) {
        for (i = 0; i < holiDays.length; i++) {
            if (date.getFullYear() == holiDays[i][0]
      && date.getMonth() == holiDays[i][1] - 1
      && date.getDate() == holiDays[i][2]) {
                return [false, 'holiday', holiDays[i][3]]; // changed from [true, 'holiday', holiDays[i][3]];
            }
        }
        return [true, ''];
    }