jQuery Datepicker beforeShowDay

Question

我正在使用jQuery的datepicker beforeShowDay事件，在那里我检查日期是否必须在日历中启用它们。首先我得到了用PHP检查页面加载的日期，但现在我想用ajax请求获取这些日期（我正在使用Wordpress），但我无法弄明白。

这是我的代码：

$(function() {  
    var enabledDays = [];        

    function openedDays() {
        var data = {
            action: 'get_dates',
            zaal: <?php echo $zaal_id; ?>,
            async: false,
            dataType: 'json'
        };

        $.getJSON(ajaxurl, data, function(response) {
            $.each(response, function(key, value) {
                enabledDays.push(value);  
            });
            //works, console.log(enabledDays) shows here an array of dates: ["9-8-2012","9-10-2012"] 

            //add option beforeShowDay to datepicker? (does't work yet)
            $(this).datepicker('option','beforeShowDay',enableAllTheseDays); 

        });

    }


    function enableAllTheseDays(date) {
        //how to get value of the enabledDays variable in here

        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

        for (i = 0; i < enabledDays.length; i++) {
            if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
                //return true(enable date in Current Days Open calendar) if date is in array, add class 'ui-datepicker-opened-day' and tooltip 'opened' to it.
                return [true,'ui-datepicker-opened-day','opened'];
            }
        }            

        //return false(disable date in Current Days Open calendar) if date isn't in both of the arrays, and add tooltip 'closed' to it.    
        return [false,'ui-datepicker-closed-day','closed'];

    }


    //show Current Days Open Calendar
        $( "#currentdays" ).datepicker({
            dateFormat: "dd-MM-yy",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: 0,
            beforeShow: openedDays
        });  

});

我需要找到一种方法来从opensDays函数中获取日期，在执行enableAllTheseDays函数之前，所以我可以在enableAllTheseDays函数中使用enabledDays变量。

Answer 1

在onLoad（）函数中实例化一次datepicker，并在那时定义beforeShowDay()方法。每次显示日期选择器时都会调用beforeShowDay()，允许您每次迭代日期。

$(function(){
    $("your-selector").datepicker({
        beforeShowDay: function(date) {
            // Either put the enable days code here (I prefer this route)
            // or call it from here: return enableAllTheseDays(date);
            // or define beforeShowDay as beforeShowDay: enableAllTheseDays.
            // It will run each time the date picker is displayed.
        }
    });

    // Now setup your ajax call to load your dates into enabledDays
    // Do not call datepicker again
    $.getJSON(ajaxurl, data, function(response) {
        $.each(response, function(key, value) {
            enabledDays.push(value);
        });
    });
});