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