js 日历控件。
一直想写一个日历控件。因种种原因迟迟未写，总算写了一个自己的日历控件了，没啥复杂功能。下面是截图
css部分：
@charset "utf-8";
/* CSS Document */
.mainBox{width:800px;margin:50px auto;background:#eee;padding:10px;border:1px solid #222;}
body{margin:0px;padding:0px;}
.dateBox{width:160px;line-height:20px; background:#fff;}
.dateBox td{padding:2px;text-align:center;}
.dateBox thead td{background:#96BB84;color:#fff;}
.dateBox tbody td{cursor:pointer;}
.dateBox tbody td:hover{background:#96BB84}
.dateBox button{cursor:pointer;width:35px;background:#96BB84;border:none;color:#fff;}
.dateBox .dateBtn_l{float:left;}
.dateBox .dateBtn_r{float:right;}
.dateBox .dateText{width:85px; display:inline-block;zoom:1;text-align:center;_float:left;}
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期控件</title>
</head>
<body>
<div class="mainBox">
<a href="http://www.js63.net/demo/js/2012/4/date/date.rar" style="color:#f00; font-weight:bold;">下载文件</a>
<p><b>关于用法：</b></p>
实例一个dateClass类即可。
dateClass类有四个参数，第一个是必须参数，为目标输入框的id，后面三个参数可以不要，如果需要自定义默认时间的话三个参数需要同时存在，依次为：年,月,日.<br />
可以参考下面的写法：<br />
var testDate2 = new dateClass("inputId",2012,5,5);
下面有三个示例:<br />
第一个是设置当前时间为默认日期。<br />
第二个是设置指定日期为默认时期。(2012/5/5);<br />
第三个是未设置默认日期。程序会自动获取当前日期做为默认弹出。
<p>--------------------------------------------------------------</p>
<p>
<b>class简单说明：</b>
</p>
<p>
控制整个时间的盒子class名字是：dateBox<br />
显示时间条的class名字是：dateTool<br />
左右按钮的共用class名字是：dateBtn<br />
左按钮的class私有名字是：dateBtn_l<br />
右按钮的class私有名字是：dateBtn_r<br />
显示当前时间的class名字是：dateText<br />
装时间表格的class名字是：dateTableDiv<br />
如果不明白，请用fireBug查看。目前我简单做了一些小修饰，可根据需要做调整。
</p>
<p>--------------------------------------------------------------</p>
获取时间：<input type="text" id="testDate"/>
<br />
<br />
<br />
<br />
这里也是：<input type="text" id="testDate2" />
<br />
<br />
<br />
这里也是：<input type="text" id="testDate3" />
</div>
<script type="text/javascript">
//使用方法
var nowDate = new Date();
var testDate = new dateClass("testDate",nowDate.getFullYear(),nowDate.getMonth()+1,nowDate.getDate());
var testDate2 = new dateClass("testDate2",2012,5,5);
var testDate3 = new dateClass("testDate3");
</script>
</body>
</html>
JS部分：
// JavaScript Document
/*
Author:DaHai.Jin
Date:2012/4
*/
function dateClass(id,y,m,d){
/*
id：元素id(必须)
y:年
m:月
d:日
*/
var that = this;
if(!id)return;
//获取对象
this.obj = document.getElementById(id);
var nowDate = new Date();
if(y&&m&&d){
this.obj.value = y+"/"+(m)+"/"+d;
};
this.y = y ? y : nowDate.getFullYear() ;
this.m = m ? m-1 : nowDate.getMonth();
this.obj.onclick = function(event){
event = that.getEvent(event);
that.stopPropagation(event);
that.init(y,m);
that.show();
};
};
dateClass.prototype ={
show:function(){
//获取元素并设置时间盒坐标
var that = this;
this.dateBox.style.display = "block";
this.pos = this.getElePosition(that.obj);
this.l = this.pos.left;
this.t = this.pos.top;
this.h = this.obj.offsetHeight;
this.dateBox.style.left = this.l +"px";
this.dateBox.style.top = this.t+this.h +"px";
},
hide:function(){
this.dateBox.style.display = "none";
},
isHide:function(){
var that= this;
var v = that.getStyles(that.dateBox)["display"];
return (v=="none"? true : false);
},
getStyles:function(ele){
var style;
if (document.defaultView && document.defaultView.getComputedStyle)
style = document.defaultView.getComputedStyle(ele, null);
else
style = ele.currentStyle;
return style;
},
init:function(y,m){
var that= this;
if(!document.getElementById("dateBox")){
//时间盒子
this.dateBox = document.createElement("div");
this.dateBox.className = "dateBox";
this.dateBox.id = "dateBox";
this.dateBox.style.position = "absolute";
this.dateBox.style.zIndex = 999999;
this.dateBox.onclick = function(event){
event = that.getEvent(event);
that.stopPropagation(event);
};
var oldFn = document.body.onclick;
if(typeof oldFn == "function"){
document.onclick = function(){
oldFn();
that.hide();
}
}else{
document.onclick = function(){
that.hide();
}
};
//时间控制条
this.toolBox = document.createElement("div");
this.toolBox.className = "dateTool";
//按钮 - 往前
this.btn_p = document.createElement("button");
this.btn_p.className = "dateBtn dateBtn_l";
this.btn_p.id = "dateBtn_l";
this.btn_p.innerHTML = " < ";
//按钮 - 往后
this.btn_n = document.createElement("button");
this.btn_n.className = "dateBtn dateBtn_r";
this.btn_n.id = "dateBtn_r";
this.btn_n.innerHTML = ">";
//年月显示容器
this.dateText = document.createElement("span");
this.dateText.className = "dateText";
this.dateText.id = "dateText";
this.toolBox.appendChild(this.btn_p);
this.toolBox.appendChild(this.dateText);
this.toolBox.appendChild(this.btn_n);
this.dateBox.appendChild(this.toolBox);
//表格盒子
this.tableDiv = document.createElement("div"); //IE不支持innerHTML写法，所以包一层
this.tableDiv.id = "dateTableDiv";
this.tableDiv.className = "dateTableDiv";
this.dateBox.appendChild(this.tableDiv);
}else{
this.dateBox = document.getElementById("dateBox");
this.btn_p = document.getElementById("dateBtn_l");
this.btn_n = document.getElementById("dateBtn_r");
this.dateText = document.getElementById("dateText");
this.tableDiv = document.getElementById("dateTableDiv");
}
this.show();
this.btn_p.onclick = function(){that.pre();};
this.btn_n.onclick = function(){that.next();};
document.body.appendChild(this.dateBox);
//周期
this.myW = new Array();
this.myW[0] = [];
this.myW[0][0] ="日";
this.myW[0][1] ="一";
this.myW[0][2] ="二";
this.myW[0][3] ="三";
this.myW[0][4] ="四";
this.myW[0][5] ="五";
this.myW[0][6] ="六";
//生成日期
this.month();
},
pre:function(){
if(this.m>0){
this.m--;
}else{
this.m= 11;
this.y--;
}
this.month();
},
next:function(){
if(this.m<11){
this.m++;
}else{
this.m= 0;
this.y++;
}
this.month();
},
getDaysInMonth:function(y,m){ // 获取当月天数
var thePrevDate = new Date(y,m+1,0);//当参数为0的时候获取的值是上个月的最后一天，我们在这里给月份加一以获取我们需要的月份数量
return thePrevDate.getDate();
},
month:function(){
var that= this;
this.tableDiv.innerHTML = "";
//表格
this.table = document.createElement("table");
this.table.setAttribute("cellpadding",0);
this.table.setAttribute("cellspacing",0);
this.table.setAttribute("borderColor","96BB84");
this.table.border = 1;
this.table.style.borderCollapse = "collapse";
this.table.style.background = "#fff";
this.table.style.width = "100%";
this.table.dateClass = "tableDate";
this.thead = document.createElement("thead");
this.tbody = document.createElement("tbody");
this.table.appendChild(this.thead);
this.table.appendChild(this.tbody);
this.tableDiv.appendChild(this.table);
var tdHtml = "";
//因为ie里表格不支持innerHTML方法，所以按传统方法
var tr = document.createElement("tr");
for(var t=0;t<7;t++){
var c = this.myW[0][t],td;
td = document.createElement("td");
td.innerHTML = c;
tr.appendChild(td);
};
this.thead.appendChild(tr);
var myMonth = [],days = this.getDaysInMonth(this.y,this.m),d = 1,iDayOfFirst = new Date(this.y,this.m,1).getDay(),tr,td;
//计算行数
var rNum = Math.ceil((days - (7-iDayOfFirst))/7); //计算出tr的数量.用总天数-(本月第一天是周几，然后算出第周占用了几天)，然后除以7向上舍入。
//设置第一行
myMonth[0] = [];
for(var w = iDayOfFirst;w<=6;w++){
myMonth[0][w] = d;
d++;
};
for(var r = 1;r<=rNum;r++){
myMonth[r] = [];
for(w=0;w<=6;w++){
if(d<=days){
myMonth[r][w] = d;
d++;
};
};
};
for(var i = 0;i<myMonth.length;i++){
tdHtml = "";
tr = document.createElement("tr");
for(var t=0;t<7;t++){
var c = (myMonth[i][t] == undefined) ? "" : myMonth[i][t];
td = document.createElement("td");
td.innerHTML = c;
tr.appendChild(td);
};
this.tbody.appendChild(tr);
};
this.tbody.onclick = function(event){
event = that.getEvent(event);
var target = that.getTarget(event);
if(target.nodeName.toLocaleUpperCase()=="TD"){
if(target.innerHTML=="")return;
that.obj.value = that.dateText.innerHTML+"/"+target.innerHTML;
that.dateBox.style.display = "none";
}
}
this.dateText.innerHTML = this.y+"/"+(this.m+1);
},
getEvent:function(event){ //获取事件对象
return event ? event:window.event;
},
getTarget:function(event){ //获取正在处理发生事件的对象
return event.target || event.srcElement;
},
stopPropagation:function(event){ //阻止冒泡
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}, //获取元素坐标
getElePosition:function(ele){
if(!ele)return;
var left = 0,top = 0;
if("getBoundingClientRect" in document.documentElement){
var box = ele.getBoundingClientRect(),
doc = ele.ownerDocument,
body = doc.body,
docElem = doc.documentElement,
clientTop = doc.clientTop || body.clientTop || 0,
clientLeft = doc.clientLeft || body.clientLeft || 0 ,
left = box.left + (self.pageXOffset || docElem && docElem.scrollLeft || body.scrollTop) - clientLeft,
top = box.top + (self.pageYOffset || docElem && docElem.scrollTop || body.scrollTop) - clientTop;
}else{
do{
top+=ele.offsetTop,
left+=ele.offsetLeft,
ele = elel.offsetParent;
}while(ele)
};
return {left:left,top:top}
}
}
