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"> </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
