datepicker Error = Uncaught TypeError: Cannot read property '0' of undefined

Question

Can't get jQueryUI datepicker option beforeShowDay to work.

I've tried different help topics I've found but I can't get it working.

I get this error

Uncaught TypeError: Cannot read property '0' of undefined

This is my JS. but it doesn't seems to work

<script type="text/javascript">
jQuery(document).ready(function () {
    var your_dates = [new Date(13, 5, 5), new Date(13, 5, 10)];
    jQuery("div#event-calender").datepicker({
        beforeShowDay: function (date) {
            if (jQuery.inArray(date.toString(), your_dates) != -1) {
                return [true, 'highlight'];
            }
        }
    });
});
</script>

Solution 1

You need to always return an array, not just when a condition matches.

From the documentation:

beforeShowDay

Type: Function( Date date )

A function that takes a date as a parameter and must return an array

jQuery(document).ready(function () {
    var your_dates = [new Date(13, 5, 5), new Date(13, 5, 10)];
    jQuery("div#event-calender").datepicker({
        beforeShowDay: function (date) {
            var arr;
            if (jQuery.inArray(date.toString(), your_dates) != -1) {
                arr = [true, 'highlight'];
            }else {
                arr = [true, ''];
            }
            return arr;
        }
    });
});

FIDDLE

Solution 2

beforeShowDay
A function that takes a date as a parameter and must return an array with:

• true/false indicating whether or not this date is selectable a CSS
• class name to add to the date's cell or "" for the default
• presentation an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed

Change your beforeShowDay to

beforeShowDay: function (date) {
    if (jQuery.inArray(date.toString(), your_dates) != -1) {
        return [true, 'highlight'];
    } else {
        return [true, ''];
    }
}

Edit
Either change your_dates to

var your_dates = [new Date(2013,5,5).toString(), new Date(2013,5,10).toString()];

or use something like this instead of jQuery.inArray(...)

var found = your_dates.filter(function(d) {
                return date.getTime() === d.getTime();
            }).length > 0;

return [true, (found ? 'highlight' : '')];

Comments

[user2407193]

That helped thanks. But i all the elements get's "not-highlighted". Do you know what this problem is? Should I choose some other Date format?

[Andreas]

Is this really the date you expect new Date(13, 5, 5) == "05. June, 1913" ?

[user2407193]

No, my array looks like this now <code>var your_dates = [new Date(2013,05,05), new Date(2013,05,10)];</code> But still no one gets the highlight class

[Rens Tillmann]

Thank you, quite an obvious issue, saved me some debug time to actually find where the issue was since js error didn't show me the exact row of the file +1 :)