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

又遇到相同問題的童鞋可以聯系我，相互討論！^_^