一款基于jQuery日历插件的开发过程
这个插件的设置选项，所有样式都设置成自定义，提供回调函数，方便在外部进行扩展
css设置是可变的 也就是说 日历的样式是定制的；
/*********************************2月18 bug更新***************************************/
更新返回数组年份错误
if(Number(this.formdate[5])>12){
this.formdate[5]=1;
//这里错误的将this.formdate[0]直接修改了
this.formdate[0]=this.formdate[0]+1;
}
/******顺便贴出一个调用的demo*******/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历插件</title>
<script src="../bsw/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
.beforemdate,.aftermdate{ color: #999999;}
.formdate{ color: #ff9000; background: #dfdfdf;}
.ctitle td{ background: #dfdfdf;}
#calbeforbtn{ left:10px;}
</style>
<input type="text" />
<script src="jQuery.calendar.js" type="text/javascript" charset="utf-8"></script>
<script>
var btn = $('input');
btn.on('click',function(){
var a = $('body').Calendar({
formdate:new Date(2012,11,12), //开始时间 默认今天
Calendarboxclass:'Calendarbox', //日历盒模型的classname
Calendarboxtitle:'Calendarboxtitle', //日历的标题classname
Dayclass:'ctitle', //日历星期的classname
Dateclass:'Datetitle', //日历日期的classname
beforemdate:'beforemdate', //上月显示的日期class
aftermdate:'aftermdate', //下月显示的日期class
'400px', //宽
height:'400px', //高
titletext:"请选择日历", //标题
prevtext:"<img src = '../jiuzhuang/img/backico.png'/>", //上月按钮的text
nexttext:"下月>", //下月按钮的text
datecs:'datecs', //是否显示月份 空为不显示 传入一个class值则创建一个显示年份和月份的盒子
ecallback:function(e){ //切换产生的回调函数 有一个参数e e为切换的按钮对象
},
callback:function(d){
//返回的d 所在日期信息
console.log(d);
//绑定事件前需要先清除事件
$('.Datetitle>td').unbind('click');
$('.Datetitle>td').on('click',function(){
btn.val($(this).data('date'));
$('.Calendarbox').remove();
});
},
});
});
</script>
</body>
</html>
废话不多说，如有错误，跪求各位大神指正，感谢！！
;(function($){
//创建一个日历插件
$.fn.Calendar = function(o){
//为这个日历插件创建一个构造函数
var Calendar = function(o,obj){
this.fnin(o,obj);
};
//为日历的实例对象添加原型
Calendar.prototype = {
fnin:function(o,obj){
//$.extend()绑定选项 第一个参数对象是内部默认选项 第二个参数o是外部设置的选项
this.o=o=$.extend({
formdate:new Date(), //开始时间 默认今天 **************传入的参数月份参考java的月份 0表示1月 11表示12月*******************
Calendarboxclass:'Calendarbox', //日历盒模型的classname
Calendarboxtitle:'Calendarboxtitle', //日历的标题classname
Dayclass:'ctitle', //日历星期的classname
Dateclass:'Datetitle', //日历日期的classname
beforemdate:'beforemdate', //上月显示的日期class
aftermdate:'aftermdate', //下月显示的日期class
'400px', //宽
height:'400px', //高
titletext:"请选择日历", //标题
prevtext:"<上月", //上月按钮的text
nexttext:"下月>", //下月按钮的text
datecs:'datecs', //是否显示月份 空为不显示 传入一个class值则创建一个显示年份和月份的盒子
ecallback:function(e){ //切换产生的回调函数 有一个参数e e为切换的按钮对象
},
callback:function(d){ //插件回调函数 返回当前所在的年和月 以及当月一号所在的星期 上月的月份 和下月的月份
}
},o);
this.obj = $(obj);
//创建日历盒模型
this.cboxtext = "<div style=""+this.o.width+";height:"+this.o.height+";" class="+this.o.Calendarboxclass+">";
this.cboxtext += "<div style="text-align:center;position:relative;" class="+this.o.Calendarboxtitle+"><a style="position:absolute;left:0;top:0;" id='calbeforbtn' href='javascript:;'>"+this.o.prevtext+"</a>"+this.o.titletext+"<a id='calafterbtn' style="position:absolute;right:0;top:0;" href='javascript:;'>"+this.o.nexttext+"</a><div>";
this.cboxtext += "<table style="100%;" );
}
this.datecsbox = $('.'+this.o.datecs);
//返回所有的选项信息
return this;
},
//拆分日期并返回
datecs:function(){
//获取日期填入数组
this.formdate = [];
this.formdate[0] = this.o.formdate.getFullYear();
this.formdate[1] = this.o.formdate.getMonth()+1;
this.formdate[2] = this.o.formdate.getDate();
this.formdate[3] = new Date(this.formdate[0],this.formdate[1]-1,1).getDay();
this.formdate[4] = this.formdate[1]-1;
this.formdate[5] = this.formdate[1]+1;
//本月天数
this.mouthgetday = new Date(this.formdate[0],this.formdate[1],0).getDate();
//上月天数
this.mouthgetdaybef = new Date(this.formdate[0],this.formdate[4],0).getDate();
//下月天数
this.mouthgetdayaft = new Date(this.formdate[0],this.formdate[5],0).getDate();
this.i=0;
this.m=0;
this.a=0;
this.datet=0;
if(this.formdate[1]<10){this.formdate[1]='0'+parseInt(this.formdate[1]).toString();};
if(this.formdate[2]<10){this.formdate[2]='0'+parseInt(this.formdate[2]).toString();};
return this.formdate;
},
//输出日期函数
cExport:function(z){
//如果是切换状态 初始化class 设置文字标识
if(z){
this.tdbox.attr('class','');
this.datecsbox.html(this.datecsarr[0]+"年"+this.datecsarr[1]+"月");
};
//输出本月
for(this.i;this.i<this.mouthgetday;this.i++){
var datet = this.i+1;
if(datet<10){datet='0'+parseInt(datet).toString();};
if(this.formdatestr==(this.formdate[0]+'-'+this.formdate[1]+'-'+datet)){this.tdbox.eq(this.i+this.formdate[3]).addClass('formdate')};
this.tdbox.eq(this.i+this.formdate[3]).html(datet).attr('title',this.formdate[0]+'-'+this.formdate[1]+'-'+datet);
}
//输出上月
var befoyear
for(this.a=this.formdate[3]-1;this.a>=0;this.a--){
if(Number(this.formdate[4])<=0){
this.formdate[4]=12;
befoyear=this.formdate[0]-1;
}else{
befoyear=this.formdate[0];
}
if(this.formdate[4]<10){this.formdate[4]='0'+parseInt(this.formdate[4]).toString();};
this.tdbox.eq(this.a).html(this.mouthgetdaybef).addClass(this.o.beforemdate).attr('title',befoyear+'-'+this.formdate[4]+'-'+this.mouthgetdaybef);
this.mouthgetdaybef--;
}
//输出下月
var tdlen = this.tdbox.length,
aftlen = tdlen-this.mouthgetday-this.formdate[3],
startaft = this.mouthgetday+this.formdate[3];
for(this.i=0;this.i<aftlen;this.i++){
if(Number(this.formdate[5])>12){
this.formdate[5]=1;
var aftyear=this.formdate[0]+1;
}
if(this.formdate[5]<10){this.formdate[5]='0'+parseInt(this.formdate[5]).toString();};
var datet = this.i+1;
if(datet<10){datet='0'+datet.toString();};
this.tdbox.eq(this.i+startaft).html(datet).addClass(this.o.aftermdate).attr('title',aftyear+'-'+this.formdate[5]+'-'+datet).data('date',aftyear+'-'+this.formdate[5]+'-'+datet);
}
this.o.callback(this.datecsarr);
},
//切换函数
isbtn:function(){
var _this = this;
$('#calbeforbtn').on('click',function(ev){
var year = _this.o.formdate.getFullYear();
var mouth = _this.o.formdate.getMonth();
_this.o.formdate=new Date(year,mouth-1,1);
//输出日期
_this.datecsarr = _this.datecs();
_this.cExport(true);
_this.o.ecallback($(this));
ev.stopPropagation();
});
$('#calafterbtn').on('click',function(ev){
var year = _this.o.formdate.getFullYear();
var mouth = _this.o.formdate.getMonth();
_this.o.formdate=new Date(year,mouth+1,1);
//输出日期
_this.datecsarr = _this.datecs();
_this.cExport(true);
_this.o.ecallback($(this));
ev.stopPropagation();
});
},
//设置方法要返回的信息
returninfo:function(){
//返回当前所在的年和月 以及当月一号所在的星期 上月的月份 和下月的月份
return this.datecsarr;
}
};
//返回实例 以及实例选项信息
return new Calendar(o,this).cfnin();
}
})(jQuery);
/******************************************/