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

时间:2024-02-24 21:55:04

由于工作需要,项目中使用了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 }

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