对bs日历插件的运用

原创 2013年12月03日 16:31:11

  今天做了一个老师给活,大概就是实现一个日历的功能,网上的日历基本都是选择一天,然后跳下一个月,这回他们提出的要求是比如像一个活动一样,在某几天举行,然后要将那几天的日期给标记一下,刚开始想过比较搜的主意,就是遍历一下日历表格的Dom,然后根据后台数据库给出的数据,进行匹配,选择那些满足的,然后对表格进行样式的改变,后来想想,貌似有点麻烦的感觉,然后就试着去修改日历的源代码,看看那些地方能后修改的。

周末看了一天的源码,选了两个,第一个是在实际项目里用到的日历,但是源代码太长了。差不多1700行,http://www.malot.fr/bootstrap-datetimepicker/而且,初学者实在是有点能力捉急,于是放弃了,然后再群里问了有人给出了一个日历,查阅之后发现原来是好多bs日历的源头,而且代码就500行左右http://www.eyecon.ro/bootstrap-datepicker/,一开始一直在看源码,发现好多的方法在他在api都不明确提供了。


先写一个页面

<div class="input-append date" id="dp3" data-date="2013-12-01" data-date-format="yyyy-mm-dd">
        <input class="span2" size="16" type="text">
        <span class="add-on"><i class="icon-th"></i></span>
    </div>
然后再写上他的js调用,其实主要是针对Date类型要进行转化,

<script type="text/javascript">
    //到时候timearray数组由后台的数组读入进去
    var timeArray=["2013-12-07","2013-12-15","2013-12-26","2014-1-1"];

    var nowTemp = new Date();
    
    var arrayCompare = new Array();
    for(var i=0;i<timeArray.length;i++){
        var timeTmp = timeArray[i].split("-");// 后台的-形式的时间进行预处理
        var utcTmp = new Date(timeTmp[0],timeTmp[1]-1,timeTmp[2],0,0,0,0);
        arrayCompare[i]=utcTmp;
    }
     $('#dp3').datepicker({
      "onRender": function(date) {
        if(date.valueOf() < nowTemp){//判断日期是否大于当前日期
           return "disabled";
        }
        else{
            for(var j = 0;j<arrayCompare.length;j++){
                if(date.valueOf()==arrayCompare[j].valueOf()){
                    return "disabled";
                }
            }
            return "";
        }
       
      }
    });
    var nowYear = nowTemp.getFullYear(),
        nowMonth = nowTemp.getMonth()+1,
        nowDay = nowTemp.getDate();
    var nowString =nowYear+"-"+nowMonth+"-"+nowDay;//由于时间的问题,要月份从开始计算,设置
    $("#dp3").datepicker('setValue',nowString);//顺序不能调换,每次一换,整个页面会进行一个刷新,之前的就白做了
</script>


还有就是onRender方法的利用,暂时写了一个功能型的,感觉在查找上面可以进行优化,现在做的事最笨的遍历,准备再试试对时间进行排序,再二分查找试试看,还有就是这个文章给了很大的提示http://www.see-source.com/blog/300000033/373

相关文章推荐

jQuery表格插件bs_grid

  • 2014年05月15日 11:20
  • 83KB
  • 下载

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

Extjs4.0日历插件与项目整合的详细介绍

日历插件的calendar目录的src子目录结构介绍 data目录是日历插件的数据集,示例中的数据集分为两类: 1)calendar日历 - CalendarMappin...

jquery-ui日历插件的使用步骤

1.首先下载jquery-ui压缩包,解压导入项目中 2.引入需要的js与css文件 /resources/bootstrap/css/bootstrap.min.css" type="text/c...

精挑细选的10个jQuery日历插件

在本文中,小编为大家整理了10个非常有用的jQuery日历插件,为你的网站添加非常t适用的日历功能。 CLNDR.js CLNDR.js是一个可创建日历的jQuery插件,支持自定义。该插件不会生...

FullCalendar日历插件说明文档(转)

本文来源于helloweba.com,原文链接为http://www.helloweba.com/view-blog-231.html FullCalendar提供了丰富的属性设置和方法调用,开...
  • heliub
  • heliub
  • 2015年04月22日 11:23
  • 387

jQuery插件FullCalendar日程表实现可扩展Google日历功能

jQuery插件FullCalendar日程表实现可扩展Google日历功能 这个介绍 jQuery 日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划...

常用的Jquery日历插件

FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样...

jquery日历插件

jquery日历插件 $(function (){ $("#startTime,#endTime").datepicker({ altField:"#actual...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月29日 21:06
  • 1049
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:对bs日历插件的运用
举报原因:
原因补充:

(最多只允许输入30个字)