一款基于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,可以滑动切换.水平和垂直滚 ...
随机推荐
- openCV C++ 代码笔记
代码片段1 cv_contourMask_step_tmp=cv_contourMask.clone(); cv::Mat maskImage; UIImageToMat(pathimg, maskI ...
- 禁用nested loop join里的spool
禁用nested loop join里的spool 转载自: https://blogs.msdn.microsoft.com/psssql/2015/12/15/spool-operator-and ...
- .net core中使用openssl的公钥私钥进行加解密
这篇博文分享的是 C#中使用OpenSSL的公钥加密/私钥解密 一文中的解决方法在 .net core 中的改进.之前的博文针对的是 .NET Framework ,加解密用的是 RSACryptoS ...
- ABP理论学习之实体类
返回总目录 本篇目录 实体类 惯例接口 审计 软删除 激活/未激活 IEntity接口 实体是DDD(领域驱动设计)的核心概念之一.Eirc Evans是这样描述的实体的:"它根本上不是通过 ...
- [.net 面向对象程序设计进阶] (14) 缓存(Cache) (一) 认识缓存技术
[.net 面向对象程序设计进阶] (14) 缓存(Cache)(一) 认识缓存技术 本节导读: 缓存(Cache)是一种用空间换时间的技术,在.NET程序设计中合理利用,可以极大的提高程序的运行效率 ...
- 大白话讲解Promise（一）
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...
- 常用网络工具 ipconfig arp traceroute
如今的计算机是离不开网络的计算机了,因而我们对网络要有一基础的认识.连不上网,程序运行不正常之类的,多少都与网络有关.本文将介绍常用的工具. 网络出问题 ipconfig ping 网络连不上,首先要 ...
- SmtpClient发邮件时为什么用MailMessage.From而不用MailMessage.Sender
今天在看C#高级编程(第9版)的时候,在768页看到这样的一段代码 SmtpClient sc = new SmtpClient(); sc.Host = "邮箱服务器地址"; M ...
- 【开源】OSharp3.3框架解说系列：开发计划与进度
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- Rehosting the Workflow Designer
官方文档:https://msdn.microsoft.com/en-us/library/dd489451(v=vs.110).aspx The Windows Workflow Designer ...