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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
微信小程序实现刷脸登录
May 25 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python 中的lambda函数介绍
2018/10/10 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL