一款基于jQuery日历插件的开发过程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一款基于jQuery日历插件的开发过程相关的知识，希望对你有一定的参考价值。
这个插件的设置选项，所有样式都设置成自定义，提供回调函数，方便在外部进行扩展
css设置是可变的 也就是说 日历的样式是定制的；
废话不多说，如有错误，跪求各位大神指正，感谢！！
;(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
width:‘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=\"width:"+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=\"width:100%;\" id=\"ztfCalendar\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr align=‘center‘ class="+this.o.Dayclass+"><td>日<\/td><td>一<\/td><td>二<\/td><td>三<\/td><td>四<\/td><td>五</td><td>六<\/td></tr><\/table>";
this.cboxtext += "<\/div>";
},
//主体函数
cfnin:function(){
this.datecsarr = this.datecs();
//拿到当前定位的日期字符串
this.formdatestr = this.formdate[0]+‘-‘+this.formdate[1]+‘-‘+this.formdate[2];
//引入主体
this.obj.append(this.cboxtext);
//准备输出日期
this.boxobj=$(‘#ztfCalendar‘);
//输出tr td
this.datetext="<tr class="+this.o.Dateclass+"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
for(this.m;this.m<6;this.m++){this.boxobj.append(this.datetext);};
this.tdbox = $(‘.‘+this.o.Dateclass+‘>td‘);
//输出日期
this.cExport();
//qiehuan
this.isbtn();
if(this.o.datecs!=‘‘){
$(‘.‘+this.o.Calendarboxtitle).append("<span class="+this.o.datecs+">"+this.datecsarr[0]+"年"+this.datecsarr[1]+"月"+"</span>");
}
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;
this.formdate[0]=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‘,this.formdate[0]+‘-‘+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);
/******************************************/
以上是关于一款基于jQuery日历插件的开发过程的主要内容，如果未能解决你的问题，请参考以下文章
基于jquery的带事件显示功能的日历板插件calendar.js