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;
}

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