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() 函数中实例化一次日期选择器，并在那时定义 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);
        });
    });
});