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");
.
.
.

Answer 2

I would say you should probably define that function outside of the datepicker call and then your change and the datepicker can call that function.

EDIT: Clarification added.

Trying to figure out how the plugin works to call the function is probably more work than it's worth. You can define the function separately and then just pass it to the plugin. Then your dropdown change event can call that independent method.

Something like this:

function doMyThing(dateToShow){
   // do stuff
}

$("#myDiv").datepicker({
    ...
    beforeShowDay: function(dateToShow){
        doMyThing(dateToShow);
    }
});  

$('#myList').change(function () {
    doMyThing(dateToShow);
});  

The only thing I'm unsure of is what you'll want to pass as a parameter in the onchange. Since it's not an action of clicking on a date, I don't know what "dateToShow" should be.