datePicker in jQuery UI not working

Question

I want to call the beforeShowDay function in jquery UI datepicker, but I found that the location of beforeShowDay matters and I have no clue.

Code would help:

<script>
    var datePickerOptions = {
        minDate: 'today',
        beforeShowDay: available
    };

    /*This is a function only let datePicker show the dates in dateList*/
    var available = function(date){
        window.console.log("in");
        var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
        if($.inArray( dmy, dateList ) !== -1 ) {
            return [true, "", "Available"];
        }
        else {
            return [false, "", "unAvailable"];
        }
    };

    var init = function(availableDates) {
        $('.datePicker').datepicker(datePickerOptions);
    };
</script>

If I write it in this way, the minDate would work, but the beforeShowDay wouldn't, the console didn't print 'in'.

But if I write it in this way:

var init = function(availableDates) {
    $('.datePicker').datepicker({
        minDate: 'today',
        beforeShowDay: available
    });
};

it would work.I don't see the real difference between these two methods, and I really want to use the first method.

Any ideas? Thanks.

Answer 1

It is because when available is used to create the datePickerOptions object it is not initialized with a value, so it has a value of undefined which is same as not passing the option in this case. You can move the creation of datePickerOptions after the available variable is initialized to fix the problem.

/*This is a function only let datePicker show the dates in dateList*/
var available = function(date){
    window.console.log("in");
    var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
    if($.inArray( dmy, dateList ) !== -1 ) {
        return [true, "", "Available"];
    }
    else {
        return [false, "", "unAvailable"];
    }
};

var datePickerOptions = {
    minDate: 'today',
    beforeShowDay: available
};

var init = function(availableDates) {
    $('.datePicker').datepicker(datePickerOptions);
};