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

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

Bootstrap日期/日历插件Datepicker 时间加标记的更多相关文章

  1. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  2. 2016/06/10 日历插件 Datepicker

    显示效果: <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  3. jquery 日历插件datepicker格式调整

    <script> $(function() { $("#datepicker").datepicker({ dateFormat: "yy/mm/dd&quo ...

  4. 日历插件DatePicker

    Datepicker 地址:https://getuikit.com/v2/docs/datepicker.html

  5. jqueryUI之datepicker日历插件的介绍和使用

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件.我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.

  6. jquery插件datepicker

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. <script ...

  7. 日历插件js,jquery

    常用的日历插件 DatePicker My97DatePicker   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言. ...

  8. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  9. Jquery datepicker 时间插件使用 js 时间相加,相减

    $(document).ready(function(){ //输入框事件 $('#probation').bind('input propertychange', function() { var ...

随机推荐

  1. python 基础 9.4 游标

    一. 游标是系统为用户开设的一个数据缓冲区,存放SQL语句的执行结果.       用户可以用SQL 语句逐一从游标中获取记录,并赋值给主变量,交由python 进一步处理,一组主变量一次只能存放一条 ...

  2. One Person Game(概率+数学)

    There is a very simple and interesting one-person game. You have 3 dice, namelyDie1, Die2 and Die3.  ...

  3. full stack on the road

    Full Stack, I'm coming. 有人说全栈只是个理想情况,但我不这么认为,因为好多思想是想通的, 比如 OO.函数式编程.设计模式... 也有人说搞全栈的人样样普通,可是为嘛我在学习j ...

  4. 九度OJ 1338:角斗士 (递归、DP)

    时间限制:3 秒 内存限制:32 兆 特殊判题:否 提交:213 解决:66 题目描述: 角斗士是古罗马奴隶社会的一种特殊身份的奴隶,他们的职责是在角斗场上进行殊死搏斗,为了人们提供野蛮的娱乐.他们的 ...

  5. ubuntu下操作端口的方法

    最简单的一个操作:sudo ufw status可检查防火墙的状态,我的返回的是:不活动 sudo ufw version防火墙版本: ufw 0.29-4ubuntu1 Copyright 2008 ...

  6. 2.PyCharm安装和使用之HelloWorld

    百度搜一个就好了, 然后下一步下一步 重点来了,穷!   这软件需要购买不然就只能用30天, 作为屌丝的我,在网上不然的搜索: 然后终于搞定了! 屌丝的春天:http://idea.lanyus.co ...

  7. EventLoop(netty源码死磕4)

    精进篇:netty源码  死磕4-EventLoop的鬼斧神工 目录 1. EventLoop的鬼斧神工 2. 初识 EventLoop 3. Reactor模式回顾 3.1. Reactor模式的组 ...

  8. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  9. [IOI2018]组合动作

    IOI2018 组合动作 UOJ 首先显然可以两次试出首字母 考虑增量构造 假设首字母为A,且已经试出前i个字母得到的串s 我们考虑press这样一个串s+BB+s+BX+s+BY+s+XA 首先这个 ...

  10. java线程 同步临界区:thinking in java4 21.3.5

    java线程 同步临界区:thinking in java4 21.3.5 thinking in java 4免费下载:http://download.csdn.net/detail/liangru ...