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"));
});​

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

Solution 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.

Comments

[learning]

How can I call the beforeShowDay: function(dateToShow) from the dropdown change?

[learning]

Even if i`m calling doMyThing(dateToShow); upon my list change, it does not call the OnChange function of the DatePicker! I need to call the OnChange event of the DatePicker from the myListChange event

[James Montagne]

Maybe if you explain what you're actually using this form I can better understand. I believe "beforeShowDay" gets called prior to the calendar displaying, not onChange.

[learning]

Ok, let me explain. The DatePicker is being displayed in a partial view and all the functions associated to the DatePicker are in the partial view. Upon loading the page, the DatePicker functions are being called. But when I am clicking on the dropdown, no functions seemed to be called despite having the setDate Functions.

[James Montagne]

But I mean, what is the actual functionality you're looking for. What is in this dropdown? When the dropdown is selected, what should happen to the datepicker, should it populate with some date based on what is selected? Could you possibly provide what happens within those events (beforeShowDay etc.)?

[learning]

@kingjiv, i have provided more detailed code. My aim here, is upon the value chosen in the dropdown list, I retrieve the freeDate list from the database and upon that value I must be able to display the date accordingly in the DatePicker

[learning]

And based upon the freeDate values, my datepicker must show the month of the first freeDate, i.e the firstmonth from the beginning

[learning]

it`s not rendering the datePikcer based upon the value chosen on the dropdownlist despite it bringing new freedates...

[learning]

where should I use the datepicker.refresh, can I have an example please

[learning]

the datePicker isn`t being refrenshed upon a change in value in the dropdown list

[James Montagne]

Okay, sorry if I'm having a hard time understanding this. But do you mean you don't want to actually change the date selected in the datepicker, just the default month when the person goes to pick a new date?

[James Montagne]

Also... what is the intent of this line? $("#myDiv").datepicker("setDate", $("#myDiv").datepicker("getDate").toString("yyyy/MM/dd")); seems like you're setting the date of the date picker to the date it is already set to.

[learning]

The aim here is to load the datepicker date at which it was last set to

[horbor]

@learning, have you solved your problem? If "yes", please write the solution. I understand what you were talking about, have a similar issue right now.

[Dev Dev]

For anyone facing this issue in 2022, here is how I solved it: copy the datepicker initialization code into a function. run it the first time the page loads to have it working then when you do the ajax call, on success return, destroy the datepicker then re-initialize it with the data you need, something like : $('#datepicker').datepicker("destroy");initializeDatepicker(‌​);