javascript 日历控件

royzhou1985

浏览: 249986 次
性别:
来自: 广州

最近访客更多访客>>

a684716

zhengzizhi

ganxueyun

odinyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript J#HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var Calendar = {
		target : new Object(),
		format : "yyyy-MM-dd",
		curDate : new Date(),
		weekArray : new Array("日","一","二","三","四","五","六"),
		monthArray : new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"),
		goSelectTag : new Array(),
		show : function(curYear, curMonth) {		
			var day2Array = this.build(curYear, curMonth);
			var div = this.$("calendar_div");
			if(div) {
				this.hide();
				document.body.removeChild(div);
			}
			div = document.createElement("DIV");
			div.id = "calendar_div";
			div.style.border = "1px solid #000";
			div.style.position = "absolute";
			div.style.left = this.getXY(this.target).x;
			div.style.top = this.getXY(this.target).y + this.target.offsetHeight + 1;
			document.body.appendChild(div);
			div.style.display = "";
	
			var tableHTML = "";
			tableHTML += "<table border=\"0\" bgcolor=\"#f1f1f1\">";
			tableHTML += "<tr>";
			tableHTML += "<td valign=\"middle\" align='center'><input type=\"button\" name=\"prevMonth\" value=\"<\" style=\"border:none;background:transparent;height:20;width:20;FONT:16 Fixedsys\" onClick=\"Calendar.prevMonth();event.cancelBubble=true\" />";
			tableHTML += "&nbsp;&nbsp;";
			tableHTML += "<select id=\"selMonth\" onChange=\"Calendar.update()\" Victor=\"Won\" onclick=\"event.cancelBubble=true\">";
			for (var i=0; i<this.monthArray.length; i++)
				tableHTML += "<option value=\""+ i +"\"" + (i==curMonth?" selected":"") + ">"+this.monthArray[i]+"</option>";
			tableHTML += "</SELECT>";
			tableHTML += "&nbsp;&nbsp;"
			tableHTML += "<SELECT id=\"selYear\" onChange=\"Calendar.update()\" Victor=\"Won\" onclick=\"event.cancelBubble=true\">";
			for(var i=1990;i<2015;i++)
				tableHTML += "<option value=\""+i+"\"" + (i==curYear?" selected":"") + ">&nbsp;&nbsp;"+i+"&nbsp;&nbsp;</OPTION>";
			tableHTML += "</select>";
			tableHTML += "&nbsp;&nbsp;";
			tableHTML += "<input type=\"button\" name=\"nextMonth\" value=\">\" style=\"border:none;background:transparent;height:20;width:20;FONT:16 Fixedsys\" onclick=\"Calendar.nextMonth();event.cancelBubble=true\" />";
			tableHTML += "</td>";
			tableHTML += "</tr>";
			tableHTML += "<tr>";
			tableHTML += "<td align=\"center\">";
			tableHTML += "<div style=\"background-color:'#f1f1f1';\">";
			tableHTML += "<table width=\"100%\" border=\"0\">";
			
			tableHTML += "<tr>";
			for(var i=0; i<7; i++)
				tableHTML += "<td bgcolor='#b9b973' align=center valign=middle><font face=Verdana style='font-size:12px;'><b>" + this.weekArray[i] + "</b></font></td>";
			tableHTML += "</tr>";
			
			var fontColor = "";
			for (var i=1; i<7; i++) {
				tableHTML += "<tr>";
				for (var j=0; j<7; j++) {
					if((j==0 || j==6)&&day2Array[i][j]>0) {
						fontColor = "color:red";
					} else if(day2Array[i][j]<0){
						fontColor = "color:gray";
					} else {
						fontColor = "color:#000";
					} 
					tableHTML += "<td bgcolor=\"#f1f1f1\" bordercolor=\"#f1f1f1\" valign=\"middle\" align=\"center\" height=\"15\" style=\"font:bold 12px Verdana;cursor:hand;"
					+ fontColor + "\" onMouseOver=\"this.bgColor='#ffff00'\" onMouseOut=\"this.bgColor='#f1f1f1'\" onClick=\"Calendar.setSelected(this)\">";
					tableHTML += Math.abs(day2Array[i][j]);
					tableHTML += "</td>";
				}
				tableHTML += "</tr>";
			}

			tableHTML += "</table>";
			tableHTML += "</div>";
			tableHTML += "</td>";
			tableHTML += "</tr>";
			tableHTML += "<tr><td align=\"center\">";
			tableHTML += "<font face=Tahoma size=2><A style=\"cursor:hand\" onMouseOver=\"this.style.color='#ffff00'\" onClick=\"self.event.cancelBubble=true;Calendar.setToday('" + this.curDate.getFullYear() + "','" + (this.curDate.getMonth()+1) + "','" + this.curDate.getDate() + "')\" onMouseOut=\"this.style.color=0\">今天:&nbsp;&nbsp;"+this.monthArray[this.curDate.getMonth()]+"&nbsp;"+this.curDate.getDate()+",&nbsp;&nbsp;"+this.curDate.getFullYear()+"</a></font>";
			tableHTML += "</td></tr>";
			tableHTML += "</table>";
			div.innerHTML = tableHTML;
			this.toggleTags();
		},
		build : function(curYear,curMonth) {
			var day2Array = new Array();
			var iDay = 1;
			var iNext = 1;
			day2Array[0] = this.weekArray;
			for(var i=1; i<7; i++) {
				day2Array[i] = new Array();
			}
			var firstDayOfMonth = new Date(curYear,curMonth,1).getDay(); //第一天是星期几
			var daysInMonth = new Date(curYear,curMonth+1,0).getDate(); //该月有多少天
			if(curMonth==11) {
				daysInMonth = new Date(curYear+1,0,0).getDate();
			}
			var daysInLastMonth = new Date(curYear, curMonth, 0).getDate() - firstDayOfMonth + 1;
			for(var i=0; i<7; i++) {
				day2Array[1][i] = (i<firstDayOfMonth)? -(daysInLastMonth+i):iDay++;
			}
			for(var i=2; i<7; i++) {
				for(var j=0; j<7; j++) {
					day2Array[i][j] = (iDay<=daysInMonth)? iDay++:-(iNext++);
				}
			}
			return day2Array;
		},
		prevMonth : function() {
			var selYear = parseInt(this.$("selYear").value);
			var selMonth = parseInt(this.$("selMonth").value)-1;
			if(selMonth<0) {
				selMonth = 11;
				selYear = selYear-1;
			}
			this.show(selYear, selMonth);
		},
		nextMonth : function() {
			var selYear = parseInt(this.$("selYear").value);
			var selMonth = parseInt(this.$("selMonth").value)+1;
			if(selMonth>11) {
				selMonth = 0;
				selYear = selYear+1;
			}
			this.show(selYear, selMonth);
		},
		update : function() {
			var selYear = parseInt(this.$("selYear").value);
			var selMonth = parseInt(this.$("selMonth").value);
			this.show(selYear, selMonth);
		},
		setSelected : function(object) {
			var selYear = parseInt(this.$("selYear").value);
			var selMonth = parseInt(this.$("selMonth").value)+1;
			var selDay = object.childNodes[0].nodeValue;

			if(object.style.color == "gray") {
				if(selDay>20) {
					selMonth = selMonth-1;
					if(selMonth<1) {
						selMonth = 12;
						selYear = selYear - 1;
					}
				} else {
					selMonth = selMonth+1;
					if(selMonth>12) {
						selMonth = 1;
						selYear = selYear + 1;
					}
				}
			}
			var selectedDay = selYear + "-" + (selMonth<10?"0"+selMonth:selMonth) + "-" + (selDay<10?"0"+selDay:selDay);
			this.target.value = selectedDay;
			this.hide();
		},
		setToday : function(selYear,selMonth,selDay) {
			var selectedDay = selYear + "-" + (selMonth<10?"0"+selMonth:selMonth) + "-" + (selDay<10?"0"+selDay:selDay);
			this.target.value = selectedDay;
			this.hide();
		},
		$ : function(id) {
			if(typeof(id)=="string") {
				return document.getElementById(id);
			} else {
				return id;
			}
		},
		getXY : function(object){
			var oTmp = object;
			var pt = {x:0,y:0};
			do {
				pt.x += oTmp.offsetLeft;
				pt.y += oTmp.offsetTop;
				oTmp = oTmp.offsetParent;
			} while(oTmp.tagName!="BODY");
			return pt;
		},
		toggleTags : function(){
			var selects = document.getElementsByTagName("SELECT");
			var Victor = "";
			for(var i=0; i<selects.length; i++) {
				if(document.all) {
					Victor = selects[i].Victor;
				} else {
					Victor = selects[i].getAttribute("Victor");
				}
				if(Victor!="Won"&&this.tagInBound(selects[i])) {
					selects[i].style.visibility = "hidden";
					this.goSelectTag[this.goSelectTag.length] = selects[i];
				}
			}
		},
		tagInBound : function (object){
			var calendar_div = this.$("calendar_div");
			var l = parseInt(calendar_div.style.left);
			var t = parseInt(calendar_div.style.top);
			var r = l+parseInt(calendar_div.offsetWidth);
			var b = t+parseInt(calendar_div.offsetHeight);
			var ptLT = this.getXY(object);
			return !((ptLT.x>r)||(ptLT.x+object.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+object.offsetHeight<t));
		},
		hide : function() {
			if(this.$("calendar_div")) {
				this.$("calendar_div").style.display = "none";
			}
			for(var i=0; i<this.goSelectTag.length; i++) {
				this.goSelectTag[i].style.visibility = "visible";
			}
		}
	}

	if(window.attachEvent) {
		window.attachEvent("onload",function() {
			var inputs = document.getElementsByTagName("INPUT");
			for(var i=0; i<inputs.length; i++) {
				if(inputs[i].type=="text" && inputs[i].showCalendar=="true") {
					inputs[i].attachEvent("onclick",function(target){
						return function() {
							Calendar.target = target;
							var curYear = new Date().getFullYear();
							var curMonth = new Date().getMonth();
							Calendar.show(curYear,curMonth);
						}
					}(inputs[i]))
				}
			}
		});

		document.attachEvent("onclick",function(){
			var flag = false;
			var srcElement = getEvent().srcElement;
			do{
				if((srcElement.id && srcElement.id=="calendar_div") || srcElement.showCalendar == "true") {
					flag = true;
					break;
				}
				if(srcElement.tagName == "BODY") {
					break;
				}
			} while(srcElement = srcElement.offsetParent);

			if(!flag) {
				Calendar.hide();
			}
		});
	} else if(window.addEventListener) {
		window.addEventListener("load",function(){
			var inputs = document.getElementsByTagName("INPUT");
			for(var i=0; i<inputs.length; i++) {
				if(inputs[i].type=="text" && inputs[i].getAttribute("showCalendar")=="true") {
					inputs[i].addEventListener("click",function(target){
						return function() {
							Calendar.target = target;
							var curYear = new Date().getFullYear();
							var curMonth = new Date().getMonth();
							Calendar.show(curYear,curMonth);
						}
					}(inputs[i]),false)
				}
			}
		},false);

		document.addEventListener("click",function(){
			var flag = false;
			var srcElement = getEvent().target;   
     		do{
				if((srcElement.id && srcElement.id=="calendar_div") || srcElement.getAttribute("showCalendar") == "true") {
					flag = true;
					break;
				}
				if(srcElement.tagName == "BODY") {
					break;
				}
			} while(srcElement = srcElement.offsetParent);

			if(!flag) {
				Calendar.hide();
			}
		},false);
	}
	
	function getEvent() {
		if(document.all)    
			return window.event;//如果是ie
		func=getEvent.caller;
        while(func!=null){
            var arg0=func.arguments[0];
            if(arg0){
				if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
					return arg0;
				}            
			}
            func=func.caller;
        }
		return null;
	}

  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <input type="text" showCalendar="true" format="yyyy-MM-dd" id="test" size="33" /><br/>
  <select><option value="111111111"></option></select>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <select><option value="111111111"></option></select>
  <input type="text" showCalendar="true" format="yyyy-MM-dd" id="aaa" size="33" /><br/>
 </BODY>
</HTML>

Calendar.zip (3.2 KB)
下载次数: 33

0
顶

0
踩

分享到：

百度源代码里的精妙javascript图片大小处理 ... | 兼容IE和Firefox Event对象

2009-10-09 22:25
浏览 1304
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 日历控件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 日历控件

评论

发表评论

相关推荐

window.onresize 触发多次解决方法

百度源代码里的精妙javascript图片大小处理函数

兼容IE和Firefox Event对象

设置window.open打开窗口的标题

iframe 自适应高度

彻底领悟javascript中的exec与match方法

正则表达式方法的几个方法介绍match exec search replace split

javascript 与或非运算符详解

javascript try finally 妙用,防止内存泄漏

JAVASCRIPT 中 VOID(0) 的含义

onbeforeunload与onunload的使用

Ajax 封装

JavaScript执行window.onload和body onload多个处理过程的方法

javascript 变量作用域

兼容IE、FF的insertAdjacentHTML方法

javascript格式化日期

javascript:数据类型Null与Undefined

客户端获取上传文件的大小

javascript打开链接的几种方式

仿QQ附件上传

最近访客更多访客>>