在 Bootstrap3 Datepicker 中突出显示特定日期答案

【问题标题】：Highlight Specific Dates in Bootstrap3 Datepicker在 Bootstrap3 Datepicker 中突出显示特定日期
【发布时间】：2015-01-25 19:38:05
【问题描述】：

我正在尝试在 Bootstrap 的 Datepicker 中突出显示数组中的特定日期，但无法使其正常工作。我想要类似下面的代码，但找不到任何示例。有谁知道如何进行这项工作？

var dateValues = ['1/01/2015', '1/14/2015', '1/19/2015']

$('#events-calendar').datepicker({
highlightDates = dateValues 
)}

【问题讨论】：

标签： twitter-bootstrap-3 bootstrap-datepicker

【解决方案1】：

我最终不得不自己添加该功能，想不出任何其他方法。

数组看起来像这样：

        [
            { "Class": "fault", "Date": "1995-06-23" },
            { "Class": "fault", "Date": "2014-05-01" },
            { "Class": "fault", "Date": "2015-06-17" },
            { "Class": "fault", "Date": "2015-06-14" }
        ]

在我的选项中添加了以下内容。

  var options = {
                    highlights: allBindings.datetimepicker.attr.highlights || []
                };

在'fillDate'函数的while循环中的bootstrap-datetimepicker.js中插入以下代码：

        var cssClass = "";
            try {
                for (var j = 0; j < options.highlights.length; j++) {
                    var current = options.highlights[j];
                    if (current.Date == prevMonth._d.yyyymmdd()) {
                        cssClass = "faulted";
                        break;
                    } else {
                        cssClass = "";
                    }
                }
            } catch (e) {
                console.log('Date pick date highlighter" ' + e);
            }

然后我更改了以下行：

     row.append('<td class="day' + clsName + '">' + prevMonth.date() + '</td>');

到：

     row.append('<td class="day' + clsName + ' ' + cssClass + '">' + prevMonth.date() + '</td>');

您可以将“故障”类修改为您想要的任何颜色。但我的看起来像这样：

.faulted {
background-color: red !important;

}

输出如下所示：

【讨论】：