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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
js几个验证函数代码
Mar 25 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
js 求时间差的实现代码
Apr 26 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
某页码显示的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防止SQL注入详解及防范
2013/11/12 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
js数组的操作指南
2014/12/28 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
2014两会优秀的心得体会范文
2014/03/17 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
班主任先进事迹材料
2014/12/17 职场文书
简历自我评价模板
2015/03/11 职场文书
关于分班的感言
2015/08/04 职场文书
数学复习课教学反思
2016/02/18 职场文书
教学反思怎么写
2016/02/24 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers