Bootstrap日期/日历插件Datepicker 时间加标记-CSDN博客

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

特此记录此次解决方案：

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

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

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

都需要改变此属性的值。

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

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

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

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

 1 function showRemark(days){
 2     var datepicker=$('#zhixingdate').parent();
 3     var Mdateswitch=datepicker.find(".datepicker .datepicker-days .table-condensed thead .switch");    //日日历里的当前月份元素
 4     var UIDays=datepicker.find(".datepicker .datepicker-days .table-condensed tbody tr td.day");    //显示日层中所有的td元素
 5     UIDays.removeClass("remark");            //移除所有的标志
 6     var dmonths=Mdateswitch.attr("addr");    //获取当前显示日层中addr属性的值
 7 
 8     //循环td显示日元素，将显示日的值+addr属性的值，和传递过来的dasys数组结果集做比较，如果相等则加上标记样式remark
 9     for(var i=0; i< days.length;i++){
10         var v = days[i];
11         UIDays.each(function(){                
12             var t=$(this).html();
13             if(v == (dmonths+(parseInt(t,10)<10?("0"+parseInt(t,10)):parseInt(t,10)))){
14                  if(!$(this).hasClass("remark") && !$(this).hasClass("new") && !$(this).hasClass("old")){
15                      $(this).addClass("remark");
16                  }
17             }
18         });
19      }
20  }

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

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

转载于:https://www.cnblogs.com/chenche/p/3342155.html