jquery - 在 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 的日期选择器上的日期。如何解决这个问题

Answer 1

您的问题是，一旦数据从请求返回到服务器(异步)，success 函数就会运行，因此 for 循环超过 appendDate 将不执行任何操作(因为执行该代码时变量仍然是空字符串)。

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

However - I really think your code should not work like this.

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

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

我确实认为您应该做的另一项更改 - 保留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];
            }
        });
    }
});