Bootstrap日期/日历插件Datepicker 时间加标记

由于工作需要，项目中使用了Bootstrap日期/日历插件Datepicker，根据需求需要在其中添加日期标记，实现效果图如下：

特此记录此次解决方案：

1.首先分析了功能的DOM元素(如下图)，可以看到椭圆形标记的，说明此日期控件分为三个层，第一个是显示日，

　　　第二个显示的是月份，第三个显示的是年份

2.我的做法是将日期显示的地方放置一个addr属性作为当前选择年月的标记，不论是日点击事件，前后月份切换，还是月份或年份点击事件，

都需要改变此属性的值。

3.然后修改月份前后切换事件，修改日期点击事件（此事件包括选择月份），修改前后月份切换事件，下面列举的是日期点击事件。

$('#zhixingdate').datepicker().on('changeDate', function(ev){ 　//日期改变事件
        var dmonth=ev.date　　　　　　　　　　　　　　　　　　　//当前选中日期
        getOrderlyPowerDays(dmonth);　　　　　　　　　　　　　 //日期点击事件执行时进行其他操作（加标记）
});

4.加标记，也就是上面的getOrderlyPowerDays()方法，此方法中，将获取所有的显示日的td标签+addr属性的年月拼接起来和方法中查询到

的日期做比较，如果是相同日期，则添加标志（添加remark样式）

 function showRemark(days){
     var datepicker=$('#zhixingdate').parent();
     var Mdateswitch=datepicker.find(".datepicker .datepicker-days .table-condensed thead .switch");    //日日历里的当前月份元素
     var UIDays=datepicker.find(".datepicker .datepicker-days .table-condensed tbody tr td.day");    //显示日层中所有的td元素
     UIDays.removeClass("remark");            //移除所有的标志
     var dmonths=Mdateswitch.attr("addr");    //获取当前显示日层中addr属性的值

     //循环td显示日元素，将显示日的值+addr属性的值，和传递过来的dasys数组结果集做比较，如果相等则加上标记样式remark
     for(var i=0; i< days.length;i++){
         var v = days[i];
         UIDays.each(function(){
             var t=$(this).html();
             if(v == (dmonths+(parseInt(t,10)<10?("0"+parseInt(t,10)):parseInt(t,10)))){
                  if(!$(this).hasClass("remark") && !$(this).hasClass("new") && !$(this).hasClass("old")){
                      $(this).addClass("remark");
                  }
             }
         });
      }
  }

 .remark {
     background: url("../img/remark.png") no-repeat scroll 0 0 transparent;
 }

又遇到相同问题的童鞋可以联系我，相互讨论！^_^