在bootstrap datepicker中将类添加到多个/特定日期？

Question

我很难将一个类添加到bootstrap中的日期。这是日期选择器。

我想要达到的目的是在我指定的日期放一个小蓝点。我想在日期中添加一个课程。我该怎么做？

Answer 1

根据您使用的日期选择器，您可以执行以下操作：

大多数日期选择器都有beforeShowDay选项。您可以在此处设置课程以添加到您想要更改的日期。

对于此示例我使用http://eternicode.github.io/bootstrap-datepicker

可以在此处找到如何执行此操作的示例：jsFiddle

您需要将要突出显示/标记的日期放入数组中：

var active_dates = ["23/5/2014","21/5/2014"];

然后使用beforeShowDay选项检查当前显示日期的日期，然后应用课程。

<input type="text" id="datepicker" />

$("#datepicker").datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
     todayHighlight: true,
     beforeShowDay: function(date){
         var d = date;
         var curr_date = d.getDate();
         var curr_month = d.getMonth() + 1; //Months are zero based
         var curr_year = d.getFullYear();
         var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

         if ($.inArray(formattedDate, active_dates) != -1){
           return {
              classes: 'activeClass'
           };
         }
      return;
  }

}）;`

activeClass可以是任何形式的CSS。在我的例子中，我刚刚改变了背景颜色。在您的示例中，您可以偏移图像并将其应用到当天。

.activeClass{
    background: #F00; 
  }

Answer 2

在演出前检查：

 $('#calendar').datepicker({ 
        calendarWeeks: true, 
        multidate: true,
        todayHighlight: true,
        daysOfWeekDisabled: [0],
        beforeShowDay: function(date){
        if (date.getMonth() == (new Date()).getMonth())
           switch (date.getDate()){
           case 4:
              return {
                 tooltip: 'Example tooltip',
                 classes: 'bd'
              };
           case 8:
              return false;
           case 21:
              return "green";
           }
        }
     });