在 jQuery Datepicker 上突出显示 MySql 日期

Posted 2023-02-24

【中文标题】在 jQuery Datepicker 上突出显示 MySql 日期

【英文标题】：Highlighting MySql dates on jQuery Datepicker

【发布时间】：2016-12-07 16:42:06

【问题描述】：

我正在使用 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 上突出显示日期。如何解决这个问题

【问题讨论】：

$.ajax 是异步的。见***.com/questions/14220321/…

【参考方案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];
            
        );
    
);

【讨论】：

感谢您解释 ajax 和 datepicker 流程​​。是的，你是对的，我向服务器发出了大约 30 个请求。在我的代码中，我将 ajax 放在 datepicker 中，因此请求取决于 beforeShowDay 一个月中的天数。感谢您的时间。欢呼