如果它在数组中，则jQuery Datepicker将类添加到日期答案

【问题标题】：jQuery Datepicker add class to date if it's in array如果它在数组中，则jQuery Datepicker将类添加到日期
【发布时间】：2021-02-10 05:04:24
【问题描述】：

我有一个 jQuery Datepicker，如果日期在数组中，我想在其中添加一个类。

我有多个数组。日期只能在一个数组中或不在数组中，而不是获得额外的类。

这是我的sn-p，下面有什么问题？

var date_red = ["2020-10-27","2020-11-02","2020-11-07","2020-11-30","2021-05-26","2021-07-17",];
var date_green = ["2020-11-09","2020-11-16","2020-11-23","2020-11-24",];

$('.date').datepicker({
    numberOfMonths: 2,
    prevText: "Eerder",
    nextText: "Later",
    minDate: null,
    firstDay: 1,
    hideIfNoPrevNext: true,
    dayNamesMin: [ "Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za" ],
    monthNames : [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        if( date_red.indexOf(string) != -1 ) {
            return [true, "red"]
        } else if( date_green.indexOf(string) != -1 ) {
            return [true, "green"]
        }
    }
});

当我运行这段代码时，它甚至不显示日历。当我用只使用一个数组的变体替换 JavaScript 时，日历就可以工作了：

var date_red = ["2020-10-27","2020-11-02","2020-11-07","2020-11-30","2021-05-26","2021-07-17",];

$('.date').datepicker({
    numberOfMonths: 2,
    prevText: "Eerder",
    nextText: "Later",
    minDate: 0,
    firstDay: 1,
    dayNamesMin: [ "Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za" ],
    monthNames : [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ date_red.indexOf(string) != -1 ]
    }
});

问题出在 if/else 语句中，我想检查两个数组并查看当前日期在哪个数组中。我可以更改什么以使脚本正常工作？我在 Stack Overflow 上没有找到类似的工作示例。

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

我找到了答案。我制作了一个包含子数组的数组，每个日期都有自己的类名。在 jQuery Datepicker 中，我创建了一个检查日期的函数：

javascript

var cssDates = [["11/7/2020", "green"],["11/9/2020", "green"],["11/16/2020", "yellow"],["11/23/2020", "red"],["11/24/2020", "green"],["11/30/2020", "yellow"],["5/26/2021", "red"],["7/17/2021", "red"]];

function SetDayStyle(date) {

    var enabled = true;
    var cssClass = "";
    var toolTip = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = month + "/" + day + "/" + year;

    for (var i = 0; i < cssDates.length; i++) 
    {
        if (cssDates[i].indexOf(compare) >= 0) cssClass = cssDates[i][1];
    }

    return new Array(enabled, cssClass, toolTip);
}

$('.date').datepicker({
    numberOfMonths: 2,
    prevText: "Eerder",
    nextText: "Later",
    minDate: null,
    firstDay: 1,
    hideIfNoPrevNext: true,
    dayNamesMin: [ "Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za" ],
    monthNames : [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
    beforeShowDay: SetDayStyle
});

【讨论】：