在 jQuery Datepicker 上突出显示 MySql 日期

Question

我正在使用 jQuery Datepicker，我正在尝试通过 ajax 突出显示来自 mysql 的日期。这是我的代码。

 var appendDate = '';    
 var days_custom = '';
 $( "#datepicker").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {        
            $.ajax({
                type: "GET",           
                url: URL,
                success: function(data)
                {                 
                    var data1 = jQuery.parseJSON(data);
                    days_custom = '[';      
                    for(i=0;i<data1.length;i++)
                    {                           
                        days_custom = days_custom + '"'+data1[i].mddate+'",';
                    }
                    days_custom.slice(0,-1)+']';

                    appendDate = days_custom;

                }
            });

            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();               
            for (i = 0; i < appendDate.length; i++) {      

                if($.inArray(y + '-' + (m+1) + '-' + d,appendDate) != -1) {                        
                    return [true, 'free-day', 'no to-do items due'];
                }
            }
            return [true];
        }
    });

    $('.free-day').find('a').css("color","yellow");
    $('.free-day').find('a').css("background","rgba(0, 0, 0, 0.74)");
});

现在从 ajax 成功开始，我以 JSON 格式返回日期

[{"status":"3","mddate":"2016-06-07"},{"status":"3","mddate":"2016-06-14"},{"status":"3","mddate":"2016-06-09"},{"status":"3","mddate":"2016-06-10"}]

而appendDate的格式应该是这样的

["2016-8-21","2016-8-24","2016-8-27","2016-8-28"];

我无法在来自 mysql 的 datepicker 上突出显示日期。如何解决这个问题

Answer 1

您的问题是，一旦数据从请求返回到服务器（异步），success 函数就会运行，因此您在 appendDate 上的 for 循环将什么也不做（因为变量是执行该代码时仍然是一个空字符串）。

您可以在$.ajax 请求中设置async:false，以确保请求同步完成。这样，javascript 代码的执行将等待请求返回，然后才会运行您在那里的 for 循环。

但是 - 我真的认为您的代码应该不像这样工作。

目前，对于datepicker 呈现的每一天，您都会向您的服务器发送一个新请求。这意味着您希望日期选择器显示的每个月向服务器发出约 30 个请求。

相反 - 一旦页面加载 - 将请求发送到服务器，并且仅在请求完成后 - 创建 datepicker。

我认为您应该做的另一项更改是保留Array。我真的不明白您为什么将返回的数据从您的请求转换为字符串。

这是一个示意性的解决方案。我不确定您的服务器的响应到底是什么样的，所以您可能想在那里更改一些内容：

var days_custom = [];
$.ajax({
    type: "GET",           
    url: URL,
    dataType: 'json',
    success: function(data) {                 
        for (var t in data) {
            days_custom[days_custom.length] = data[t].mddate
        }
        $( "#datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {       
                t_date = $.datepicker.formatDate('yyyy-m-dd', date);
                if (days_custom.indexOf(t_date) > -1) {
                    return [true, 'free-day', 'no to-do items due'];
                }
                return [true];
            }
        });
    }
});