JavaScript日历实现代码


Posted in Javascript onSeptember 12, 2010

效果如下:
JavaScript日历实现代码
javascript 代码如下:

var Calendar = function(){ 
var self = this; self.box = document.createElement("div"); 
self.head = document.createElement("div"); 
self.datePlace; 
self.body = document.createElement("div"); 
self.selectDay; 
self.foot = document.createElement("div"); 
self.timePlace; 
self.dateInfo = { 
"now" : new Date(), 
"getDate" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate(); 
}, 
"getTime" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
}, 
"getSelectTime" : function(d){ 
d = d || self.dateInfo["now"]; 
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + self.dateInfo.selectDay + 
" " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
}, 
"getDaysCount" : function(d){ 
d = d || self.dateInfo["now"]; 
return (new Date(d.getFullYear(),d.getMonth()+1,0)).getDate(); 
}, 
"weekOfFirstDay" : function(d){ 
d = d || self.dateInfo["now"]; 
return (new Date(d.getFullYear(),d.getMonth(),1)).getDay(); 
} 
}; 
self.dateInfo.selectDay = self.dateInfo["now"].getDate(); 
this.init(); 
}; 
Calendar.prototype = { 
init : function(){ 
this.initDom(); 
}, 
initDom : function(){ 
var self = this; 
//head 
var o = {"preYear":"<<","preMonth":"<","date":self.dateInfo["getDate"](),"nextMonth":">","nextYear":">>"}; 
for(var i in o){ 
var __ = o[i], tag = document.createElement("span"); 
tag.innerHTML = __.toString(); 
i!="date" && (tag.onclick = (function(fn){ 
return function(){fn.call(self);} 
})(self[i]) 
); 
i=="date" && (tag.className = "dateShow",self.datePlace = tag); 
self.head.appendChild(tag); 
} 
self.head.className = "cal-head"; 
//body 
self.buildBody(); 
self.body.className = "cal-body"; 
//foot 
self.timePlace = document.createElement("span"); 
var dInfo = self.dateInfo; 
var Valid = function(num,max){ 
num = /^\d+$/.test(num) ? num : -1; 
if(num<0 || num>max){ 
return false; 
} 
return true; 
}; 
var times = {"hour":["getHours","setHours"],"minutes":["getMinutes","setMinutes"],"seconds":["getSeconds","setSeconds"]}; 
for(var i in times){ 
var t = document.createElement("span"); 
var tInput = document.createElement("input"); 
t.innerHTML = tInput.value = dInfo["now"][times[i][0]](); 
tInput.style.display = "none"; 
t.onclick = (function(tIpt){ 
return function(){ 
this.style.display = "none"; 
tIpt.style.display = "inline-block"; 
tIpt.select(); 
} 
})(tInput); 
tInput.onblur = (function(t,setFn){ 
return function(){ 
this.style.display = "none"; 
if(Valid(this.value,(setFn=="setHours"?23:59))){ 
t.innerHTML = this.value; 
dInfo["now"][setFn](parseInt(this.value)); 
} 
t.style.display = "inline-block"; 
} 
})(t,times[i][1]); 
self.timePlace.appendChild(t); 
self.timePlace.appendChild(tInput); 
if(i!="seconds"){ 
var sp = document.createElement("span"); 
sp.innerHTML = ":"; 
self.timePlace.appendChild(sp); 
} 
} 
self.timePlace.className = "timeShow"; 
var okBtn = document.createElement("span"); 
okBtn.innerHTML = "Ok"; 
okBtn.className = "okBtn"; 
okBtn.onclick = function(){ 
alert(dInfo["getSelectTime"]()); 
}; 
self.foot.appendChild(self.timePlace); 
self.foot.appendChild(okBtn); 
self.foot.className = "cal-foot"; 
//relation 
this.box.appendChild(self.head); 
this.box.appendChild(self.body); 
this.box.appendChild(self.foot); 
this.box.className = "cal-box"; 
document.body.appendChild(this.box); 
}, 
buildBody : function(){ 
var self = this,dInfo = self.dateInfo, week = dInfo["weekOfFirstDay"](),days = dInfo["getDaysCount"](),day = dInfo["now"].getDate(); 
var cDay = function(inner,ev){ 
var tag = document.createElement("span"); 
tag.innerHTML = inner; 
ev && (tag.onclick = function(){ 
self.selectDay.className = self.selectDay.className.replace(" selectDay",""); 
self.selectDay = this; 
self.selectDay.className = self.selectDay.className + " selectDay"; 
self.dateInfo.selectDay = inner; 
}); 
return tag; 
}; 
var domPgm = document.createDocumentFragment(); 
//weedInfo 
var weeks = ["天","一","二","三","四","五","六"]; 
for(var i=0;i<weeks.length;i++){ 
domPgm.appendChild(cDay(weeks[i])); 
} 
//上个月的补白 
for(var i=0;i<week;i++){ 
domPgm.appendChild(cDay("")); 
} 
//本月信息 
parseInt(self.dateInfo.selectDay) > days && (self.dateInfo.selectDay = days); 
for(var i=1;i<=days;i++){ 
var tag = cDay(i,true); 
self.dateInfo.selectDay == i && (self.selectDay = tag,tag.className=" selectDay"); 
i===day && (tag.className=tag.className+" nowDay"); 
domPgm.appendChild(tag); 
} 
//下个月的补白.... 
self.body.innerHTML = ""; 
self.body.appendChild(domPgm); 
}, 
dateShow : function(){ 
this.datePlace.innerHTML = this.dateInfo["getDate"](); 
}, 
updateUI : function(){ 
this.dateShow(); 
this.buildBody(); 
}, 
preYear : function(){ 
this.dateInfo["now"].setYear(this.dateInfo["now"].getFullYear()-1); 
this.updateUI(); 
}, 
preMonth : function(){ 
var dInfo = this.dateInfo,m = dInfo["now"].getMonth(); 
--m; 
m<0 && (m = 11,dInfo["now"].setYear(this.dateInfo["now"].getFullYear()-1)); 
dInfo["now"].setMonth(m); 
this.updateUI(); 
}, 
nextMonth : function(){ 
var dInfo = this.dateInfo,m = dInfo["now"].getMonth(); 
++m; 
m>11 && (m = 0,dInfo["now"].setYear(this.dateInfo["now"].getFullYear()+1)); 
dInfo["now"].setMonth(m); 
this.updateUI(); 
}, 
nextYear : function(){ 
this.dateInfo["now"].setYear(this.dateInfo["now"].getFullYear()+1); 
this.updateUI(); 
} 
};

css代码:
.cal-box{ 
width:210px; 
font-family:"Courier New", Courier, monospace; 
font-size:14px; 
} 
.cal-box span{ 
display:inline-block; 
text-align:center; 
} .cal-head{ 
background-color:#FC3; 
} 
.cal-head span{ 
width:20px; 
font-weight:bold; 
color:#69C; 
text-decoration:underline; 
cursor:pointer; 
} 
.cal-head .dateShow{ 
width:130px; 
text-decoration:none; 
} 
.cal-foot{ 
background-color:#FC3; 
} 
.cal-foot .timeShow{ 
width:160px; 
text-align:left; 
} 
.cal-foot .timeShow input{ 
width:24px; 
height:12px; 
font-size:12px; 
} 
.cal-foot .okBtn{ 
width:50px; 
background-color:#CCC; 
cursor:pointer; 
} 
.cal-body{ 
background-color:#9CF; 
} 
.cal-body span{ 
display:inline-block; 
width:30px; 
text-align:center; 
cursor:pointer; 
} 
.cal-body .nowDay{ 
background-color:#F00; 
} 
.cal-body .selectDay{ 
text-decoration:underline; 
}
Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
JavaScript小技巧 2.5 则
Sep 12 #Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 #Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 #Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 #Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 #Javascript
You might like
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
js html实现计算器功能
2018/11/13 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python破解zip加密文件的方法
2018/05/31 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Python 解析xml文件的示例
2020/09/29 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
主持人演讲稿范文
2013/12/28 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
先进党支部事迹材料
2014/01/13 职场文书
优秀学生评语大全
2014/04/25 职场文书
工作会议通知
2015/04/15 职场文书
国庆节新闻稿
2015/07/17 职场文书
体育教师研修感悟
2015/11/18 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android