引导日期选择器:如何将类(例如“活动月份”）添加到我想强调的特定月份

Bootstrap datepicker: how to add class (e.g. "month active") to specific months i want to highlight

本文关键字：添加 活动月份 选择器 日期 活动月 例如      更新时间：2023-09-26

我正在使用boostrap日期选择器，我想永久突出显示特定的月份，看起来像这样：我想实现的示例。

例如，我在ShowMonth之前看到了一些方法，但我真的不明白它是如何工作的

注意：我已将日期选择器配置为仅显示月份和年份

我真的很感激所有的帮助。提前谢谢!!

 var makeMonthActiveForThisYear = false;
        $('.datepicker').datepicker({
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months"
        }).on("show", function (date) {
            if (makeMonthActiveForThisYear) {
                var year = parseInt($(".table-condensed thead tr th:eq(1).datepicker-switch").text().split(" ")[1]);
                var highlightMonth = GetMonthToActive(year)
                $('.datepicker-months table tbody tr:first td span.month').each(function () {
                    if ($.inArray($(this).text(), highlightMonth) > -1) {
                        makeMonthActiveForThisYear = false;
                        $(this).addClass('active');
                    }
                });
            }
        }).on("changeYear", function (date) {            
            var highlightYear = [2015, 2014];
            var year = date.date.getFullYear();
            if ($.inArray(year, highlightYear) > -1) {
                makeMonthActiveForThisYear = true;
            }
        });
        function GetMonthToActive(year) {
            if (year == 2014)
                return ["Jan", "Feb", "Mar"];
            if (year == 2015)
                return ["Jan", "Mar", "Apr"];
        }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
  <link  rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<input type="text" type="text" class="form-control datepicker" />

你可以像下面这样做。这是有效的，我在发布之前已经对其进行了测试，但如果您没有得到所需的结果，我将使用演示对其进行更新。

  $('.datepicker').datepicker({
            format: 'mm/dd/yyyy',
            endDate: '+0d',
            autoclose: true
        }).on("show", function () {
            var highlightMonth =       ["Jan", "Feb", "Mar"];
$('.datepicker-months table tbody tr:first td    span.month').each(function () {                  
      if ($.inArray($(this).text(), highlightMonth) > -1) {
                       $(this).addClass('active');
                }
            });
        });
相关文章：