对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

实用的签到、日程表日历控件(可扩展)

当初写这个控件主要是为了每日签到。当然你也可以改成事件(日程表)的日历控件,所有代码和样式都会分享给你。javascript代码极其简单,详细请下载demo文件(最下方有下载链接)。其实网上能搜索到很...
  • xj447698556
  • xj447698556
  • 2015年11月28日 20:27
  • 6749

两款超好用js日历插件(fullcalendar和zabuto_calendar)

这两款插件特别类似,其实用其中一款即可。 先展示一下我用这两款插件制作的排班系统 这个是fullcalendar插件制作的排班页面,左边新建一系列组和组员,可以将人员直接拖拽至右边的日历上,不...
  • cc_blog
  • cc_blog
  • 2016年12月15日 13:15
  • 8828

Html5添加带备忘录功能的简单的日期选择器插件教程

KeyMob移动端广告平台,为广告主提供精准的效果营销和品牌推广服务,为应用开发者在游戏、应用端提供移动广告植入业务,创造更高的广告收益。...
  • Angel19951012
  • Angel19951012
  • 2016年01月08日 11:12
  • 1568

从零开始写一个jquery日历插件(一)

简单来说,jquery插件为扩展jquery原型对象的一个方法。编写jquery插件其实就是给jquery原型添加一个自定义的方法。我们先来看一个最简单的例子:$(“a”).attr(“href”,”...
  • a379402005
  • a379402005
  • 2017年08月01日 23:14
  • 950

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

1.首先下载jquery-ui压缩包,解压导入项目中 2.引入需要的js与css文件 /resources/bootstrap/css/bootstrap.min.css" type="text/c...
  • qq_20910089
  • qq_20910089
  • 2015年12月28日 10:41
  • 2010

实用插件(九)手机日历插件——Mobiscroll

1、点我下载2、使用方法:
  • qq_39198420
  • qq_39198420
  • 2017年12月28日 16:22
  • 193

(礼拜三log)前端开发:好用的日历插件推荐 plus table使用的注意事项

My97datetimePicker 好用的日历插件 table使用的注意事项
  • u014328357
  • u014328357
  • 2016年05月25日 10:13
  • 711

使用JSCal2日历插件的步骤

把这个放到相应的js目录 下 Calendar.setup({ weekNumbers : true, inputField : "upd_dt1", trigger :...
  • u012581409
  • u012581409
  • 2014年08月27日 18:21
  • 1426

基于jquery带有中国农历的日期插件

地址:http://www.zhangzhiqiang.org/js-DateControl/index.html
  • qq791007
  • qq791007
  • 2016年12月05日 08:52
  • 1311

Material-CalendarView实现的旅行日历

在Github上搜索了日历控件,比较来比较去最后选择了material-calendarview,点此链接,经过一番修改后还是不太满足自己的需求,于是继续搜索,搜索到这样一篇文章颇有收益 –> and...
  • diyangxia
  • diyangxia
  • 2016年07月29日 20:10
  • 3635
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:对bs日历插件的运用
举报原因:
原因补充:

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