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

Question

我正在尝试获取一个日期选择器来更新一组不可用的日期。如果我传递一个 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，但它有效。我必须创建一个按钮来调用日期选择器。我尝试在同一元素上尝试 .click 事件的任何代码似乎都没有及时更新。 .deferred 等根本没有触发日期选择器。我能够获得一个 Ajax，然后初始化 datepicker 工作，将整个代码插入 HTML onclick"" 元素中，但我无法使用 .click 重现这一点。

无论如何，我的方法：

1. 创建一个备用按钮来触发(#element).click
2. 创建 Ajax 函数以实时检索日期（如果您从另一个页面实时测试它，大约需要 5 秒时间）。
3. 将日期选择器代码放入成功回调中。
4. 触发.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();
});