关闭

对bs日历插件的运用

标签: 日历jQuery
584人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:19904次
    • 积分:422
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:8篇
    • 译文:0篇
    • 评论:16条
    文章分类
    最新评论