javascript写的日历类(基于pj)


Posted in Javascript onDecember 28, 2010

先看看效果:

<script type="text/javascript" src="http://users4.Jabry.com/pengju/src/pj-2.1.1.mini.js"></script> 
<script type="text/javascript" src="http://users4.Jabry.com/pengju/src/Calendar.js"></script> 
<input name="" type="text" id="pos" style="position:absolute; left:200px; top:80px;" value="" readonly="readonly" /> 
<script type="text/javascript"> 
var cat=new Calendar(new Date(1633,6,6),100); 
cat.onChange(function(){alert(this.getDateString())}) 
cat.onSelect(function(){alert(this.getDateString());}); 
cat.fadeIn(0) 
var o=new Calendar(); 
o.locateAt(pj.id("pos")); 
o.onSelect(function(){pj.id("pos").value=this.getDateString();this.hide()}); 
pj("#pos").focus(function(){o.show(100)}); 
</script>

使用很简单;
先创建一个Calendar对象
var calendar=new Calendar();

只要调用show()方法即可显示
calendar.show()

其实调用的是pj库的show方法
因此在使用之前要先把pj库引进来,在把Calendar.js引进来就可以
Calendar的主要方法有
getDateString([pattern]) format是日期格式,默认是yyyy-mm-dd
show:function(duration) 显示日历
hide:function(duration)隐藏日历
fadeIn:function(duration)淡入日历
fadeOut:function(duration)淡出日历
locateAt:function(obj,offsetX,offsetY)把日历定位到指定的元素正下方,offsetX、offsetY可选,是相对于X、Y轴的偏移量

只定义了两个事件
onChange(fn)//当改变年份或者月份是的事件监听器,以当前Calendar对象为上下文执行fn函数
onSelect(fn)//当选择日期时触发的函数,以当前Calendar对象为上下文执行fn函数

还是把源代码粘贴上来吧(有点多,因为封装了一个table)

//date:默认开始日期,不需要可以是null(以当天日期开始),yearListLength:年份下拉列表长度 
function Calendar(date,yearListLength){ 
var currentDate=date||new Date(),_this=this; this.container=pj("<div>").appendTo(document.body).setStyle({overflow:'hidden',background: '#99CCFF',border:'1px solid #CCC',fontSize:'12px',height:'160px',width:'180px',position:"absolute",display:'none'}); 
this.container.get().innerHTML='<table border="0" style=" height:160px;width:180px;"><tr> <td colspan="2" align="center" valign="middle"> <select></select></td> <td colspan="3" align="center" valign="middle"><span></span>年<span></span>月</td> <td colspan="2" align="center" valign="middle"> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select></td></tr><tr style="color: #999;"> <td align="center" valign="middle">日</td> <td align="center" valign="middle">一</td> <td align="center" valign="middle">二</td> <td align="center" valign="middle">三</td> <td align="center" valign="middle">四</td> <td align="center" valign="middle">五</td> <td align="center" valign="middle">六</td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr></table>'; 
this.spans=pj("span",this.container.get()); 
this.as=pj("a",this.container.get()).setStyle({textDecoration:"none",color:"#333"}); 
this.selects=pj("select",this.container.get()); 
this.getCurrentDate=function(){return currentDate;}; 
this.init(); 
this.initYearList(yearListLength||70); 
var change=function(){},select=function(){}; 
this.onChange=function(fn){//当改变年份或者月份是的事件监听器,以当前Calendar对象为上下文执行fn函数 
if(pj.isFunction(fn))change=fn; 
}; 
this.onSelect=function(fn){//当选择日期时触发的函数,以当前Calendar对象为上下文执行fn函数 
if(pj.isFunction(fn))select=fn; 
}; 
this.selects[0].onchange=function(){ 
currentDate.setFullYear(parseInt(this.options[this.selectedIndex].value)); 
_this.init(); 
change.apply(_this,arguments); 
};//选择年份 
this.selects[1].onchange=function(){ 
currentDate.setMonth(parseInt(this.options[this.selectedIndex].value)-1); 
_this.init(); 
change.apply(_this,arguments); 
};//选择月份 
this.selects[1].options[currentDate.getMonth()].selected=true; 
this.as.addListener({ 
click:function(){currentDate.setDate(parseInt(this.innerHTML));select.apply(_this,arguments);}, 
mouseover:function(){if(_this.todate.getDate()+""!=this.innerHTML)this.style.color="#CCC";}, 
mouseout:function(){if(_this.todate.getDate()+""!=this.innerHTML)this.style.color="#333";} 
}); 
pj("td",this.container.get(0)).addListener({ 
mouseover:function(){this.style.backgroundColor="#303";}, 
mouseout:function(){this.style.backgroundColor="#9CF";} 
}); 
} 
Calendar.prototype={ 
init:function(){ 
var cur=this.getCurrentDate(), 
i=new Date(cur.getFullYear(),cur.getMonth(),1).getDay(),//取星期 
j=new Date(cur.getFullYear(),cur.getMonth()+1,0).getDate();//取当月最大日数 
//alert(i); 
this.spans[0].innerHTML=cur.getFullYear(); 
this.spans[1].innerHTML=cur.getMonth()+1; 
var m=0,n=this.as.length-1,isTodate=Calendar.isThisMonth(cur); 
while(m<n){this.as[m].innerHTML=this.as[n].innerHTML='';n--;m++;}//清空 
for(var day=1;day<=j;day++,i++){ 
this.as[i].innerHTML=day; 
if(isTodate&&day==this.todate.getDate()){ 
this.todateLink=this.as[i]; 
pj.setStyle(this.as[i],{color:"#F60",fontWeight:"bold"}); 
}else if(!isTodate&&day==this.todate.getDate()&&this.todateLink){ 
pj.setStyle(this.todateLink,{color:"#333",fontWeight:"normal"}); 
} 
} 
}, 
initYearList:function(len){ 
Calendar.emptySelect(this.selects[0]); 
var cur=this.getCurrentDate(),now=this.todate.getFullYear(),max=Math.max(now-cur.getFullYear(),len); 
for(var y=0;y<=max;y++){//年份下拉列表长度为12 
var option=document.createElement("option"); 
if(cur.getFullYear()==now)option.selected=true; 
else option.selected=false; 
option.text=now; 
option.value=now--; 
try{ 
this.selects[0].add(option,null); 
}catch(e){ 
this.selects[0].add(option); 
} 
} 
}, 
getDateString:function(format){//format是日期格式,如yyyy-mm-dd 
if(!format||!/y{4}.m{2}.d{2}/.test(format))format="yyyy-mm-dd"; 
format=format.replace(/^yyyy/,this.getCurrentDate().getFullYear()); 
format=format.replace(/mm/,Calendar.fx(this.getCurrentDate().getMonth()+1)); 
format=format.replace(/dd/,Calendar.fx(this.getCurrentDate().getDate())); 
return format; 
}, 
todate:new Date(), 
todateLink:null, 
show:function(duration){this.container.show(duration);}, 
hide:function(duration){this.container.hide(duration);}, 
fadeIn:function(duration){this.container.fadeIn(duration);}, 
fadeOut:function(duration){this.container.fadeOut(duration);}, 
locateAt:function(obj,offsetX,offsetY){ 
this.container.locate(obj,pj.LEFT_BOTTOM_POSITION,offsetX,offsetY); 
} 
}; 
Calendar.emptySelect=function(target){ 
if(!target.options)return; 
while(target.options.length>0)target.remove(0); 
}; 
Calendar.fx=function(dig){return dig<10?'0'+dig:dig}; 
Calendar.isThisMonth=function(date){ 
return date.getFullYear()==Calendar.prototype.todate.getFullYear()&&date.getMonth()==Calendar.prototype.todate.getMonth(); 
};

三水点靠木打包
在线演示 http://demo.3water.com/js/Calendar_pj/index.htm
打包下载 https://3water.com/jiaoben/33760.html
Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
Jquery下attr和removeAttr的使用方法
Dec 28 #Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 #Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 #Javascript
基于Jquery的标签智能验证实现代码
Dec 27 #Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 #Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 #Javascript
extjs之去除s.gif的影响
Dec 25 #Javascript
You might like
php事务处理实例详解
2014/07/11 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
javascript常用对话框小集
2013/09/13 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python从Oracle读取数据生成图表
2020/10/14 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
电工技术比武方案
2014/05/11 职场文书
初中同学会活动方案
2014/08/22 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
一年级语文教学随笔
2015/08/14 职场文书