突出显示Bootstrap3 Datepicker中的特定日期

时间:2015-01-25 19:38:05

标签: twitter-bootstrap-3 bootstrap-datepicker

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

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

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

1 个答案:

答案 0 :(得分: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;

}

Out put看起来像这样: enter image description here