Question

我正在尝试使用datepicker更新不可用日期数组。下面的工作如果我传递一个PHP变量，但我遇到的问题似乎是正确返回选项的数据（它抛出一个控制台错误，无法读取未定义的0）：

jQuery(document).ready(function () {
    jQuery('#MyDate').datepicker({
        minDate: '+2',
        maxDate: new Date(2014, 1, 28),
        dateFormat: 'dd-mm-yy',

        beforeShowDay: function (date) {
            //var array = ["<?php echo $comma_seperated;?>"];

            jQuery.ajax({
                type: "POST",
                url: "/wp-admin/admin-ajax.php",
                data: {
                    action: 'unavail_dates',
                    unavaildates: '2'
                },
                success: function (output) {
                    saveVariable(output);
                }
            });

            function saveVariable(data) {
                array = '"' + data + '"';
                console.log(array);
                var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
                return [array.indexOf(string) == -1];
            }
        },
        onSelect: function (dateText) {
            jQuery(this).change();
        }
    })

请注意，控制台日志显示与有效的注释var数组相同。我正在使用一个函数来使用其相应代码中返回的值，但它只返回一个逗号分隔的日期字符串，并且缺少它的第一个和最后一个“。例如，2013/12/12”，“2013/12/13 “” 2013年12月14日

Answer 1

问题是您没有从beforeShowDay方法返回任何值。该方法不允许异步调用。

在您的情况下，在beforeShowDay中，您发送一个Ajax请求，然后该方法返回一个未定义的值，因此所有日期都将被视为有效，然后Ajax请求完成并saveVariable方法被调用，但它对beforeShowDay返回的值没有任何影响。此外还有一个问题，即日历中的每一天都会发送一个Ajax请求。

建议的解决方案可以是在页面加载时加载所有不可用日期，并在beforeShowDay方法中使用该数据。

尝试：

jQuery(document).ready(function ($) {
    var dates;
    $.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'unavail_dates',
            unavaildates: '2'
        },
        success: function (data) {
            dates = data;
        }
    });

    $('#MyDate').datepicker({
        minDate: '+2',
        maxDate: new Date(2014, 1, 28),
        dateFormat: 'dd-mm-yy',
        beforeShowDay: function (date) {
            var string = $.datepicker.formatDate('yy/mm/dd', date);
            return [dates != undefined && $.inArray(string, dates) > -1];
        },
        onSelect: function (dateText) {
            jQuery(this).change();
        }
    });
});

Answer 2

这有点hacky但它确实有效。我必须创建一个按钮来调用datepicker。我尝试在同一元素上尝试.click事件的任何代码似乎都没有及时更新。 .deferred等，根本没有触发datepicker。我能够得到一个Ajax，然后初始化datepicker工作，在元素中的HTML onclick“”中插入整个代码，但我无法用.click重现这一点。

无论如何，我的方法：

创建一个替代按钮以从

(#element).click

创建Ajax函数以实时检索日期（如果您从另一个页面实时测试，则需要大约五秒钟才能应用）。
将datepicker代码放入成功回调中。
触发.click事件。

第1步：元素的HTML：

<td><input type="text" id="MyDate" name="MyDate" readonly='true' value="click here" /></td><td><input type="button" id="button" name="button" value="Select date"></td></td>

第2步：Ajax调用以查找可用日期（我正在使用WordPress，因此URL特定于WordPress）

AjaxGet = function () {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'unavail_dates',
            unavaildates: '2'
        },
        success: function (output) {
            dates = jQuery.parseJSON('["'+output+'"]');
            mySuccessCallback( dates );
            console.log ( dates );
        }
    });
};

步骤3：mySuccessCallback（）函数来自上面的代码：

function mySuccessCallback(dates) {
    array = dates
    jQuery('#MyDate').datepicker({
        minDate: '+2',
        maxDate: new Date(2014, 1,28),
        dateFormat: 'dd-mm-yy',
        beforeShowDay: function(date) {
            var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
            return [ array.indexOf(string) == -1 ];
        },
        onSelect: function(dateText) {
            jQuery(this).change();
        }
    }).change(function() {
        if (document.getElementById('date_error_row').style.visibility == 'visible') {
            document.getElementById('date_error_row').style.visibility = 'hidden';
        }
        var postid = '<?php echo esc_js($posted_id); ?>';
        var pdate = jQuery(this).val(); //Select updated value

        jQuery.ajax({
            type:"POST",
            url: "/wp-admin/admin-ajax.php",
            data: {action: 'tempsave', postid: postid , postdate: pdate , status: 'waiting'},
            success:function(data){
                jQuery("#feedback").html(data);
            }
        });
        jQuery('#MyDate').datepicker('destroy');
    });
    jQuery('#MyDate').datepicker('show');
}

第4步：

jQuery('#button').click(function() {
    AjaxGet();
});

jQuery Datepicker Beforeshowday - Ajax返回不可用日期的数组

2 个答案: