datepicker Error = Uncaught TypeError: Cannot read

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>

Answer 1

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' : '')];

Answer 2

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