`
royzhou1985
  • 浏览: 254406 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript 日历控件

JavaScriptJ#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>
0
顶
0
踩
分享到：
| 兼容IE和Firefox Event对象
评论
发表评论

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

相关推荐

    JavaScript日历控件 六种日历

    JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单、事件管理或在线预订系统等场景。在本文中，我们将深入探讨六种不同的JavaScript日历控件，了解它们的特点...

    7种优美的javascript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一种直观的方式来选择日期。在本主题中，我们将探讨7种不同的JavaScript日历控件，这些控件以其美观的界面和用户友好的特性而受到青睐。我们将...

    两款JavaScript日历控件 网页日历控件

    JavaScript日历控件是网页开发中常用的一种组件，主要用于用户在网页上选择日期，常见于表单填写、事件安排或时间记录等场景。本篇文章将详细介绍两款常用的JavaScript日历控件，以及如何根据需求进行配置，包括更改...

    javaScript日历控件大全

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一种直观的方式来选择日期。在本资源包中，包含了几种不同的JavaScript日历控件实现，供开发者根据项目需求选择和使用。下面我们将详细探讨...

    javascript日历控件大全

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一种直观的方式来选择日期。在本压缩包“js日历控件大全”中，包含了6款不同的JavaScript日历控件，每款都有对应的效果图，使得开发者可以更直观...

    多风格多语言的JavaScript日历控件

    JavaScript日历控件是一种在网页上实现日期选择功能的交互组件，它允许用户方便地选取日期，常用于表单输入、事件安排或者时间相关的应用程序。这类控件通常使用JavaScript编程语言编写，支持多种样式和多语言，以...

    JavaScript日历控件集合包含多款

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一种直观的方式来选择日期，常用于表单填写、事件预订或者时间相关的功能。在本压缩包中，你将找到多款不同风格的日历控件，包括经典、清新、古典...

    弹出式JavaScript 日历控件

    JavaScript日历控件是网页开发中的一个重要组成部分，它为用户提供了一种直观且用户友好的方式来选择日期。Tigra Calendar是一款广泛使用的跨浏览器JavaScript日历控件，它以其弹出式的显示方式而受到青睐。在本文中...

    非常美观的JAVASCRIPT日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，增强用户体验并简化数据输入。本资源包含三款专为input字段设计的日期小控件和两款独立的日历组件，全部基于...

    javascript日历控件2

    JavaScript日历控件是一种常用的前端开发组件，它允许用户在网页上方便地选择日期，常用于表单输入、事件管理等场景。这篇博客"javascript日历控件2"可能介绍了如何创建或使用一个改进版的日历插件。下面将详细讨论...

    javascript日历控件在asp.net使用

    JavaScript日历控件在ASP.NET中的使用是一种常见的增强用户交互体验的方法。JavaScript作为一种客户端脚本语言，可以在用户的浏览器上运行，无需服务器交互就能提供动态功能，比如日期选择器。在ASP.NET框架中，我们...

    javascript日历控件

    JavaScript日历控件是一种常见的网页交互元素，它允许用户在网页上方便地选择日期，而无需手动输入。这种控件通常由JavaScript代码实现，能够提供友好的用户界面，避免因手动输入日期导致的格式错误。在网页开发中，...

    javascript日历控件 兼容ie firefox opera

    JavaScript日历控件是网页开发中常用的一种交互元素，它允许用户通过图形界面选择日期，增强用户体验。在“javascript日历控件 兼容ie firefox opera”这个主题中，我们主要探讨的是一个能够同时在Internet Explorer...

    兼容FF，IE的JAVASCRIPT日历控件

    JavaScript日历控件是一种常用的网页交互元素，它允许用户通过点击按钮或输入框触发一个弹出的日历界面，方便地选择日期。对于开发者来说，创建一个兼容不同浏览器的控件是一项挑战，因为不同的浏览器可能对...

    Javascript日历控件

    JavaScript日历控件是网页开发中常用的一种交互组件，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间管理等场景。在本文中，我们将深入探讨JavaScript日历控件的设计原理、常见功能以及一些优秀的开源...

    寒羽枫javascript日历控件 -源码.zip

    【标题】"寒羽枫javascript日历控件 -源码.zip" 提供的是一个JavaScript编写的日历组件的源代码，适用于网页开发中日期选择功能的实现。JavaScript是一种广泛使用的客户端脚本语言，它允许在浏览器端动态创建交互式...

Magicbox
Global site tag (gtag.js) - Google Analytics