js的日曆控制項 –xhtml zhuan

最近寫了一個小小的日曆空間，放上來儲存吧

 下面是js原始碼:

// JavaScript Document Calendar.js

function Calendar() {
 
 this.lan_columns = new Array("日","一","二","三","四","五","六");
 
 this.lan_column1 = "日";

 this.lan_column2 = "一";

 this.lan_column3 = "二";

 this.lan_column4 = "三";

 this.lan_column5 = "四";

 this.lan_column6 = "五";

 this.lan_column7 = "六";

 this.lan_nowtime = "當前日期";

 this.lan_unit1 = "年";

 this.lan_unit2 = "月";

 this.lan_previewmonth = "上月";

 this.lan_nextmonth = "下月";
 
 this.lan_previewyear = "上年";

 this.lan_nextyear = "下年";
 
 this.rootNode = document.body;
 
 this.container = document.createElement("DIV");
 
 this.nowyear = 0;
 this.nowmonth = 0;
 this.nowObj = null;
 
 this.isshowing = false;
 
 this.left = 0;
 this.top = 0;
 this.width = 250;
 this.height = 200;
 
 this.clickSelf = false;
 
 this.getOffset = function (e) { 
   var  t = 0;
   var l = 0;
   while(true) {
    
     t += e.offsetTop; 
     l += e.offsetLeft;
   if (typeof e.clientLeft != "undefined") {//ie
    //t += e.clientTop;
    //l += e.clientLeft;
   }
   if (e.nodeName == "BODY") {
      break;
     }
   e = e.parentNode;
   } 
   var rec = new Array(1);
   rec["top"]  = t;
   rec["left"] = l;
   return rec;
} 

 this.create = function(txt,x,y) {
  
  this.rootNode.appendChild(this.container);
  this.container.style.width = this.width + "px";
  this.container.style.height = this.height + "px";
  
  if (txt.value == "") {
   txt.value = "請點擊選擇 ..."
  }
  
  if (isNaN(x)) {
   
   var w = txt.offsetWidth;
   var h = txt.offsetHeight;
   var rect = this.getOffset(txt);
   if (x == "up") {
    this.left = rect.left;
    this.top = rect.top - 200 - h;
   } else if (x == "left") {
    this.left = rect.left - 250;
    this.top = rect.top;
   } else if (x == "right") {
    this.left = rect.left + w;
    this.top = rect.top;
   } else {
    this.left = rect.left;
    this.top = rect.top + h;
   }
   
  } else {
   this.left = x;
   this.top = y;
  }
  if (this.top < 0) {
   this.top = 0;
  }
  
  if (this.left < 0) {
   this.left = 0;
  }
  this.container.style.display = "none";
  var c = this;
  this.nowObj = txt;
  txt.onfocus = function () {
   c.container.style.display = "";
  }
  
  txt.onclick = function () {
   c.container.style.display = "";
  }
  
  txt.onblur = function () {
   if (c.clickSelf) {
    c.clickSelf = false;
    return;
   }
   c.container.style.display = "none";
  }
  
  this.container.onmouseout = function() {
   c.clickSelf = false;
  }
  //this.container.style.height = 
  
  var today = new Date();
  this.displayCalender(today.getYear(),today.getMonth(),today.getDate());
  this.container.style.borderWidth  = "1px";
  this.container.style.borderStyle  = "solid";
  this.container.style.borderColor  = "#0099FF";
  this.container.style.left = this.left + "px";
  this.container.style.top = this.top + "px";
  
  this.container.style.position = "absolute";
  this.container.style.backgroundColor = "#ffffff";
 }
 
 this.displayCalender = function(year,month,date) {
  this.container.innerHTML = "";
  if(year < 1900) year += 1900;
  var theday = new Date(year,month,1);
  this.nowyear = year;
  this.nowmonth = month;
  this.createTitle();
  this.createBody(theday);
  this.createBottom();
 }
 
 this.createTitle = function() {
  for (var i = 0; i < 7; i ++) {
   var tdiv1 = this.createTitleDiv();
   tdiv1.innerHTML = this.lan_columns[i];
   tdiv1.style.left = (this.width / 7 * i) + "px";
   this.container.appendChild(tdiv1);
  }
  
 };
 
 this.createTitleDiv = function() {
  var tdiv = document.createElement("DIV");
  tdiv.style.backgroundColor = "#0099FF";
  tdiv.style.fontWeight = "bold";
  tdiv.style.color = "#FFFFFF";
  tdiv.style.position = "absolute";
  tdiv.style.height = "20px";
  tdiv.style.top = "0px";
  tdiv.style.paddingTop="2px";
  tdiv.style.width = (this.width / 7 + 1) + "px";
  tdiv.setAttribute("align","center");
  return tdiv;
 };
 
 this.createBody = function(theday) {
  var start = theday.getDay();
  var totaldays = this.getDayNumber(this.nowyear,this.nowmonth + 1);
  var counter = 0;
  
  var mleft = 0;
  var mtop = 27;
  
  var c = this;
  var today = new Date();
  var isJudgeToday = false;
  if (this.nowyear == today.getYear() && this.nowmonth == today.getMonth()) {
   isJudgeToday = true;
  }
  
  
  for(var ii = 0 ; ii < 6 ; ii ++) {
   if(counter >= totaldays) break;
   mtop = 27 + (this.height - 54) / 6 * ii;
   mleft = 0;
   for(var i = 0 ; i < 7 ; i ++) {
    if (ii*7 + i < start) {
     mleft += this.width / 7
    } else if ( counter >= totaldays) {
     //tstr += '<td width="14%" height="20" align="center">&nbsp;</td>';
    } else {
     
     var tdiv = this.createBodyDiv();
     var tday = ii*7 + i - start + 1
     if (isJudgeToday && tday == today.getDate()) {
      tday = "<div style=\"color:#FF0000; background-color:#E0E7FE;\">" + tday + "</div>"
     }
     tdiv.innerHTML = tday;
     tdiv.style.left = mleft  + "px";
     tdiv.style.top = mtop + "px";
     tdiv.onmousedown = function() {
      this.style.borderColor = "#ffffff";
      c.choiceIt(parseInt(this.innerHTML));
     };
     this.container.appendChild(tdiv);
     counter ++;
     mleft += this.width / 7
    }
   }
   if(counter >= totaldays) break;
  }
  
 };
 
 this.createBodyDiv = function() {
  var tdiv = document.createElement("DIV");
  
  tdiv.style.position = "absolute";
  tdiv.style.height = ((this.height - 54) / 6) - 6 + "px";
  tdiv.style.width = (this.width / 7) - 7 + "px";
  tdiv.setAttribute("align","center");
  tdiv.style.borderColor = "#FFFFFF";
  tdiv.style.borderWidth = "1px";
  tdiv.style.borderStyle = "solid";
  this.createBorderStyle(tdiv)
  return tdiv;
 };
 
 this.createBottom = function() {
  var tdiv1 = this.createBottomDiv();
  tdiv1.style.width = (this.width / 1.8) + "px";
  tdiv1.style.left = "0px";
  tdiv1.innerHTML = this.lan_nowtime + this.nowyear + this.lan_unit1 + (this.nowmonth + 1) + this.lan_unit2;
  var tdiv2 = this.createBottomDiv();
  tdiv2.style.left = (this.width / 1.8) + "px";
  tdiv2.innerHTML = this.lan_previewmonth;
  
  var tdiv3 = this.createBottomDiv();
  tdiv3.style.left = (this.width / 1.8 + 27) + "px";
  tdiv3.innerHTML = this.lan_nextmonth;
  
  var tdiv4 = this.createBottomDiv();
  tdiv4.style.left = (this.width / 1.8 + 54) + "px";
  tdiv4.innerHTML = this.lan_previewyear;
  
  var tdiv5 = this.createBottomDiv();
  tdiv5.style.left = (this.width / 1.8 + 81) + "px";
  tdiv5.innerHTML = this.lan_nextyear;
  
  this.createBorderStyle(tdiv2);
  this.createBorderStyle(tdiv3);
  this.createBorderStyle(tdiv4);
  this.createBorderStyle(tdiv5);
  var obj = this;
  tdiv2.onmousedown = function() {
   obj.clickSelf = true;
   if (obj.nowmonth == 0) {
   obj.nowmonth = 11;
   obj.nowyear --;
   } else {
    obj.nowmonth --;
   }
   obj.displayCalender(obj.nowyear,obj.nowmonth,1);
  };
  
  tdiv3.onmousedown = function() {
   obj.clickSelf = true;
   if (obj.nowmonth == 11) {
    obj.nowmonth = 0;
    obj.nowyear ++;
   } else {
    obj.nowmonth ++;
   }
   obj.displayCalender(obj.nowyear,obj.nowmonth,1);
  };
  
  tdiv4.onmousedown = function() {
   obj.clickSelf = true;
   obj.nowyear --;
   obj.displayCalender(obj.nowyear,obj.nowmonth,1);
  };
  
  tdiv5.onmousedown = function() {
   obj.clickSelf = true;
   obj.nowyear ++;
   obj.displayCalender(obj.nowyear,obj.nowmonth,1);
  };
  
  
  this.container.appendChild(tdiv1);
  this.container.appendChild(tdiv2);
  this.container.appendChild(tdiv3);
  this.container.appendChild(tdiv4);
  this.container.appendChild(tdiv5);
 };
 
 this.createBorderStyle = function(tdiv) {
  try {
   tdiv.style.cursor = "pointer";
  } catch(E) {
  }
  tdiv.onmouseover = function() {
   this.style.borderColor = "#CCCCCC";
  }
  tdiv.onmouseout = function() {
   this.style.borderColor = "#FFFFFF";
  }
 }
 
 this.createBottomDiv = function() {
  var tdiv = document.createElement("DIV");
  tdiv.style.backgroundColor = "";
  tdiv.style.color = "#0099FF";
  tdiv.style.position = "absolute";
  tdiv.style.height = "20px";
  tdiv.style.top = (this.height - 29) + "px";
  tdiv.setAttribute("align","left");
  tdiv.style.borderColor = "#FFFFFF";
  tdiv.style.borderWidth = "1px";
  tdiv.style.borderStyle = "solid";
  tdiv.style.fontSize = "12px";
  return tdiv;
 };
 
 this.choiceIt = function(which) {
  var m = this.nowmonth < 9 ? "0" + (this.nowmonth + 1) : "" + (this.nowmonth + 1);
  var d = which < 10 ? "0" + which : "" + which;
  this.nowObj.value = this.nowyear + "-" + m + "-" + d;
  this.container.style.display = "none";
 }
 
 
 
 this.getDayNumber = function(year,month) {
  if(month == 2) {
   if(year % 4 == 0 && year % 100 != 0 || year % 400 ==0 ) {
    return 29;
   } else {
    return 28;
   }
  }
  if (month == 1 || month == 3 || month == 5 || month == 7 ||
   month == 8 || month == 10 || month == 12) {
   return 31;
  } else {
   return 30;
  }
 }
}

 

怎麼調用呢？？

這個是一個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>
<script language="javascript1.2" src="Calendar.js"></script>
<script language="javascript1.2">
 function test() {
  var c = new Calendar();
  c.create(document.getElementById("t1"),"left")
  
  var c2 = new Calendar();
  c2.create(document.getElementById("t2"),"down")
 }

</script>
</head>
<body onload="test()">
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div>feafewa</div>
<div style="  border:10px solid #FF0000; margin:20px; position:absolute; left:500px;

padding:20px; ">
<input type="text"  id="t1" />
</div>

<input type="text"  id="t2" />
</body>
</html>

from:http://blog.csdn.net/yaoji84/archive/2006/09/29/1305768.aspx