How to launch the beforeShowDay of DatePicker from another function

Question

I have a Datepicker with the following code. I have a dropdownbox and upon a change in the dropDown box I want to launch the datePicker beforeShowDay function. How can I do this?

var freeDate;

Part of my code is as follows:

$("#myDiv").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "yy/mm/dd",
    onSelect: function(dateText, inst) {},
    onChangeMonthYear: function(year, month, inst) {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: '@Url.Action("ListDates", "Party")',
            data: {
                date: new Date(year, month - 1, 1).toString("yyyy/MM/dd"),
                userID: userID
            },
            success: function(data) {
                freeDate = eval(data);
            },
            error: function(request, status, error) {}
        });
    },
    beforeShowDay: function(dateToShow) {
        var returnResult = new Array();
        returnResult.push(true);
        var itemMatched = false;
        $.each(freeDate, function(key, value) {
            if (new Date(parseInt(value.substr(6))).compareTo(dateToShow) == 0) {
                itemMatched = true;
                returnResult.push('timeNotFree');
                return;
            }
        });
        if (!itemMatched) returnResult.push('');
        returnResult.push('');
        return returnResult;
    }
});​

---

$('#myList').change(function() {
    userID = $("#userList > option:selected").attr("value");
    // myList is used to have freeDate and the DatePicker must be shown accordingly.
    $.ajax({
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: '@Url.Action("ListDates", "Party")',
        data: {
            date: new Date($("#myDiv").datepicker("getDate").toString("yyyy/MM/dd")),
            userID: userID
        },
        success: function(data) {
            freeDate = eval(data);
        },
        error: function(request, status, error) {}
    });
    $("#myDiv").datepicker("setDate", $("#myDiv").datepicker("getDate").toString("yyyy/MM/dd"));
});​

Answer 1

beforeShowDay is an event that is fired by datepicker before a day is rendered. You can use it to customize how the cell containing the day is displayed, e.g. you can turn it red to indicate blocked dates.

From what I understand from your question, you can call the datapicker.refresh() method to indicate that the freeDate variable has changed (by an AJAX response for example) and the calendar needs to be rendered again.

Edit

I believe this is the code for your dropdown, seems like it uses ajax:

$('#myList').change(
...

In the success callback, you have:

freeDate = eval(data);

This is where the freeDate changes and this is probably where you should call the .refresh() method. Note that AJAX is asynchronous by default so there is some delay between selecting value and the success event callback.

And here is how you call a method on an existing datepicker:

.
.
.
freeDate = eval(data);
$("#myDiv").datepicker("refresh");
.
.
.