一款基于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
width:'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
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;
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);
/******************************************/
一款基于jQuery日历插件的开发过程的更多相关文章
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 一款基于jQuery带事件记录的日历插件
之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...
- 给开发者准备的 10 款最好的 jQuery 日历插件[转]
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希 ...
- 一款基于jQuery可放大预览的图片滑块插件
今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- 一款基于jQuery的QQ表情插件
我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...
- 一款基于jQuery的分页插件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
随机推荐
- java基本数据类型
基本数据类型概念 java是一种强类型语言,意味着必须为每一个变量声明一种数据类型. java拥有8中基本数据类型,主要包含如下:4中整形类型(long.int.short.byte)表示整形数值:两 ...
- 《Linux内核设计与实现》读书笔记 第十八章 调试
第十八章调试 18.1 准备开始 需要准备的东西: l 一个bug:大部分bug通常都不是行为可靠而且定义明确的 l 一个藏匿bug的内核版本:找出bug首先出现的版本 l 相 ...
- 排列组合算法的javascript实现
命题:从成员数为N的集合S中,选出M个元素,分别求其排列与组合结果集,即 A(N, M)与C(N, M) js解法: function queue(arr, size){ if(size > a ...
- EasyPR--开发详解（3）高斯模糊、灰度化和Sobel算子
在上篇文章中我们了解了PlateLocate的过程中的所有步骤.在本篇文章中我们对前3个步骤,分别是高斯模糊.灰度化和Sobel算子进行分析. 一.高斯模糊 1.目标 对图像去噪,为边缘检测算法做准备 ...
- Go语言的堆栈分析
本文为理解翻译,原文地址:http://www.goinggo.net/2015/01/stack-traces-in-go.html Introduction 在Go语言中有一些调试技巧能帮助我们快 ...
- Docker：镜像操作和容器操作
镜像操作 列出镜像: $ sudo docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE hello-world latest 0a6b ...
- 深圳本土web前端经验交流
群号:125776555 深圳本土web前端技术交流群 baidu tencent前端拒绝垃圾广告.吹水,欢迎讨论技术.跳槽经验期待您的加入
- I/O重定向的原理和实现
在Unix系统中,每个进程都有STDIN.STDOUT和STDERR这3种标准I/O,它们是程序最通用的输入输出方式.几乎所有语言都有相应的标准I/O函数,比如,C语言可以通过scanf从终端输入字符 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (44) ------ 第八章 POCO之POCO中使用值对象和对象变更通知
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-4 POCO中使用值对象(Complex Type--也叫复合类型)属性 问题 ...
- LinuxThreads 和 NPTL
http://www.ibm.com/developerworks/cn/linux/l-threading.html Linux 线程模型的比较:LinuxThreads 和 NPTL 进行移植的开 ...