【】【】
一直想写一个日历控件。因种种原因迟迟未写，总算写了一个自己的日历控件了，没啥复杂功能。下面是截图
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部分：
日期控件 下载文件关于用法：
实例一个dateClass类即可。 dateClass类有四个参数，第一个是必须参数，为目标输入框的id，后面三个参数可以不要，如果需要自定义默认时间的话三个参数需要同时存在，依次为：年,月,日. 可以参考下面的写法： var testDate2 = new dateClass("inputId",2012,5,5); 下面有三个示例: 第一个是设置当前时间为默认日期。 第二个是设置指定日期为默认时期。(2012/5/5); 第三个是未设置默认日期。程序会自动获取当前日期做为默认弹出。--------------------------------------------------------------
class简单说明：
控制整个时间的盒子class名字是：dateBox
显示时间条的class名字是：dateTool 左右按钮的共用class名字是：dateBtn 左按钮的class私有名字是：dateBtn_l 右按钮的class私有名字是：dateBtn_r 显示当前时间的class名字是：dateText 装时间表格的class名字是：dateTableDiv 如果不明白，请用fireBug查看。目前我简单做了一些小修饰，可根据需要做调整。--------------------------------------------------------------
获取时间： 这里也是： 这里也是：
// 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