JQuery DatePicker , beforeShowDay

Question

我有点绝望，因为我不明白为什么 beforeShowDay 不能按我期望的方式工作。我试图突出显示来自数据库的某个日期（我从 Ajax 获取数据）

我似乎无法让它工作，即使我尝试不同的日期格式，日期也永远不会突出显示

在html部分，我这样称呼日历：

<div class="calendar" id="Date" ></div>

对于 Ajax 部分，我得到这样的日期数组：

     var days_custom = [];
      URL = 'get_date.php';
      
$.ajax({
    type: "GET",           
    url: URL,
    dataType: 'json',
    success: function(data) {                 
        for (var t in data) {
            days_custom[days_custom.length] = data[t].date
        }
        console.log(days_custom);
       
    }
});

在控制台中，我看到了具有该格式的日期：

['2024-05-05', '2024-05-07', '2024-05-08', '2024-05-09', '2024-05-11', '2024-05-12', '2024-05-13', '2024-05-14', '2024-05-15', '2024-05-17',  …]

我的下一步是使用这些日期尝试更改背景颜色并突出显示这些特定日期：

 $("#Date").datepicker({
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {       
                          
                t_date = $.datepicker.formatDate('yyyy-mm-dd', date);
                    
                
                if (days_custom.indexOf(t_date) > -1) {
                    return [true, 'event', 'test highlight'];
                    
                }
                return [true];
            }
        });

在我的 css 文件中，我有这个：

.event a {
    background-color: #5FBA7D !important;
    color: #ffffff !important;
}```

这没有任何作用。

我也尝试在beforeShowDay函数中的控制台中写入，但是什么也没有出现，所以我什至怀疑我是否在代码中陷入了这个......

另外，我试图在代码之前销毁日期选择器，正如我在另一个问题上看到的那样，但这不是我的问题，所以我将其从代码中删除，因为它没有改变任何内容。

谢谢大家的帮助

Answer 1

问题是 beforeShowDay 函数中的日期格式不正确。

你有：

t_date = $.datepicker.formatDate('yyyy-mm-dd', date);

这使得日期像这样“20242024-11-08”

您需要更新代码，使其具有如下所示的日期格式：

t_date = $.datepicker.formatDate('yy-mm-dd', date);

这将为您提供正确的日期格式“2024-11-08”

我在下面编写了一个片段，它使用硬编码的日期数组而不是 ajax，并将日期设置为 11 月，以便更容易查看。尝试自己运行一下并查看结果。

var days_custom = ['2024-11-05', '2024-11-07', '2024-11-08', '2024-11-09', '2024-11-11', '2024-11-12', '2024-11-13', '2024-11-14', '2024-11-15', '2024-11-17'];

$("#Date").datepicker({
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {       
                          
                t_date = $.datepicker.formatDate('yy-mm-dd', date);
                    
                if (days_custom.indexOf(t_date) > -1) {
                    return [true, 'event', 'test highlight'];
                    
                }
                return [true];
            }
        });

.event a {
    background-color: #5FBA7D !important;
    color: #ffffff !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js" integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=" crossorigin="anonymous"></script>

<div class="calendar" id="Date" ></div>