jQuery ui datepicker事件触发得太早

Question

I have a datepicker on my site and I want to format certain dates by adding a class to every <a> where the text equals some value. The code below works if I run updateDatepicker(); from the console when the datepicker is visible or if I add half a second delay in the function but it doesn't work when the onChangeMonthYear event fires and runs the function. I know the function is running because I had console.log("updateDatepicker") inside to test it.

Here's my code:

function showDatePicker(){
    $( "#datepicker" ).datepicker({
        onChangeMonthYear: function(year, month, inst) { updateDatepicker(); }
    });

function updateDatepicker(){
    var days = $(".ui-datepicker-calendar a.ui-state-default").not(".ui-priority-secondary");

    for (var i=0; i < days.length; i++) {
        if(days[i].text == "2"){
            $(days[i]).addClass("datepickerActivity");
        }
    }
}

How do I make this work without relying on a delay in the updateDatepicker() function?

Answer 1

Make sure the jQuery onLoad mechanism is used for either your call to showDatePicker, or the code within that function. This will ensure that everything is loaded and ready for use within your other functions when those events fire.

$(function () {
    showDatePicker();
});

or

function showDatePicker(){
    $(function () {
        $( "#datepicker" ).datepicker({
            onChangeMonthYear: function(year, month, inst) { updateDatepicker(); }
        });
    }
}

Edit : Since element loading isn't the issue, it appears that the onChangeMonthYear callback gets called before the calendar renders. Therefore, you will have to wait for the current call stack to clear out. You can accomplish this with a zero-wait timeout inside your updateDatepicker function.

function updateDatepicker() {
    setTimeout(function () {
        var days = $(".ui-datepicker-calendar a.ui-state-default").not(".ui-priority-secondary");

        for (var i=0; i < days.length; i++) {
            if(days[i].text == "2"){
                $(days[i]).addClass("datepickerActivity");
            }
        }
    }, 0);
}

Note, this timeout is for 0 milliseconds, but it should still get put on the call stack after the calendar render call. This is more of a limitation of the available callbacks that jQuery UI offers for the date picker.