对bs日历插件的运用

  今天做了一个老师给活，大概就是实现一个日历的功能，网上的日历基本都是选择一天，然后跳下一个月，这回他们提出的要求是比如像一个活动一样，在某几天举行，然后要将那几天的日期给标记一下，刚开始想过比较搜的主意，就是遍历一下日历表格的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