简单的javascript日期选择控件

以前在做项目的时候经常需要进行日期操作，于是乎到处找哦日期操作控件，看到别人写的日期控件感觉很羡慕，没办法，当初不会javascript，只有羡慕的份了，目前抽了点时间看下javascript，也试着模仿写着一个日期控件，虽然写的很简陋，但是能写出来，心里还是很高兴的！

JS代码：

(function(){
	var calendarDiv = null;
	var year = 0;
	var month = -1;
	var day = 0;
	var isNeedDeleteDiv = true;
	var week= ['日', '一', '二', '三', '四', '五', '六'];
	var node = null;
	/**
	 *构建日历DIV 
	 */
	function caretCalendarDIV(event) {
		var event = event || window.event;
		node = event.srcElement || event.target;
		if (calendarDiv == null) {
			calendarDiv = document.createElement("div");
			calendarDiv.style.width = "200px";
			calendarDiv.style.height = "200px"
			calendarDiv.style.position = "absolute";
			calendarDiv.style.top = (node.offsetTop + node.offsetHeight) + "px";
			calendarDiv.style.left = node.offsetLeft + "px";
			var nowTime = document.createElement("div");
			nowTime.id = "nowTime";
			calendarDiv.appendChild(nowTime);
			var table = document.createElement("table");
			var weekTr = table.insertRow(0);
			for (var i = 0; i < 7; i++) {
				var cell = weekTr.insertCell(i);
				cell.innerHTML = week[i];
			}
			for (var m = 1; m < 6; m++) {
				var row = table.insertRow(m);
				for (var j = 0; j < 7; j++) {
					var cell = row.insertCell(j);
					cell.innerHTML = "";
					cell.onclick = selectDate;
				}
			}
			var footDiv = document.createElement("div");
			footDiv.id = "footDiv";
			calendarDiv.appendChild(table);
			calendarDiv.appendChild(footDiv);
			
			addEventListener(calendarDiv,"mouseover",mouseover);
			addEventListener(calendarDiv,"mouseout",mouseout);
			document.body.appendChild(calendarDiv);
		}
		createCalendar() ;
	}
	/**
	 *鼠标移动到日历上的事件 
	 */
	function mouseover(){
		isNeedDeleteDiv = false;
	}
	/**
	 *鼠标移出日历的事件
	 */
	function mouseout(){
		isNeedDeleteDiv = true;
	}
	/**
	 *清空日历 
	 */
	function clearTable() {
		if (calendarDiv) {
			var table = calendarDiv.getElementsByTagName("table");
			if (table && table.length > 0) {
				var tds = table[0].getElementsByTagName("td");
				for (var i = 7; i < tds.length; i++) {
					tds[i].innerHTML = "";
					tds[i].style.color = "";
					tds[i].onclick = null;
				}
			}
		}
	}
	/**
	 *返回每个月有多少天 
	 */
	function getDays(year, months) {
		var days = 0;
		var isLeapyear = false;
		if (!(year % 4 && (year % 100 || year % 400))) {
			isLeapyear = true;
		}
		switch(months) {
			case 0 :
				days = 31;
				break;
			case 1 :
				if (isLeapyear) {
					days = 29
				} else {
					days = 28
				};
				break;
			case 2 :
				days = 31;
				break;
			case 3 :
				days = 30;
				break;
			case 4 :
				days = 31;
				break;
			case 5 :
				days = 30;
				break;
			case 6 :
				days = 31;
				break;
			case 7 :
				days = 31;
				break;
			case 8 :
				days = 30;
				break;
			case 9 :
				days = 31;
				break;
			case 10 :
				days = 30;
				break;
			case 11 :
				days = 31;
				break;
		}
		return days;
	}
	/**
	 *取得每个月的第一天 
	 */
	function getFirstDay(year, month) {
		var date = new Date(year, month, 0);
		return date.getDay();
	}
	 function calendar(id) {
		element = this.getElement(id);
		addEventListener(this.element, "click", this.init);
	}
	/**
	 *处理日历选中日期 
	 */
	function selectDate(event) {
		var event = event || window.event;
		var target = event.srcElement || event.target;
		var selectDay = target.innerHTML;
		var d = new Date(year , month , selectDay);
		node.value = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 ";
		isNeedDeleteDiv = true;
		distoryCalendar()
 	}
 	/**
 	 *根据ID取得节点 
 	 */
	function $(id) {
		if (id) {
			return document.getElementById(id);
		}
	}
	/**
	 *添加事件 
	 */
	function addEventListener(node, type, handler) {
		if (node.addEventListener) {
			node.addEventListener(type, handler, false);
		} else if (node.attachEvent) {
			node.attachEvent('on' + type, handler);
		} else {
			node['on' + type] = handler;
		}
	}
	/**
	 *删除事件 
	 */
	function removeEventListener(node, type, handler) {
		if (node.removeEventListener) {
			node.removeEventListener(type, handler, false);
		} else if (node.detachEvent) {
			node.detachEvent('on' + type, handler);
		} else {
			node['on' + type] = null;
		}
	}
	/**
	 *构建日历 
	 */
	function createCalendar() {
		var date = new Date();
		if (year != 0) {
			date.setFullYear(year);
		}
		if (month != -1) {
			date.setMonth(month);
		}
		year = date.getFullYear();
		month = date.getMonth();
		var div = document.getElementById("nowTime");
		if (div) {
			div.innerHTML = "<a> << </a>" + year + "<a> >> </a><a><<</a>" + (month + 1) + "<a>>></a>";
			/**
			 *为年和月操作添加相应的事件 
			 */
			var a = div.getElementsByTagName("a");
			addEventListener(a[0],"click",minusYear);
			addEventListener(a[1],"click",addYear);
			addEventListener(a[3],"click",addMonth);
			addEventListener(a[2],"click",minusMonth);			
		}
		var footDiv = document.getElementById("footDiv");
		if (footDiv) {
			footDiv.innerHTML = year + "年" + (month + 1) + "月" + date.getDate() + "日 星期" + week[date.getDay()];
		}
		var firstDay = getFirstDay(year, month);
		var dayLength = getDays(year, month);
		var tds = calendarDiv.getElementsByTagName("table")[0].getElementsByTagName("td");
		var j = 1;
		/**
		 * i下标从7开始，以前日历表格前七个表示的是星期名称 ，所以要把他们空出来
		 */
		for (var i = 7; i < tds.length; i++) {
			if (i <= 7 + firstDay) {
				tds[i].innerHTML = " ";
			} else {
				if (j <= dayLength) {
					/**
					 *当时间和今天相同的时候，红色突出显示 
					 */
					if (j == date.getDate()) {
						tds[i].style.color = "red";
					}
					tds[i].innerHTML = j++;
				}
			}
		}
	}
	/**
	 *将日历DIV销毁 
	 */
	function distoryCalendar(){
		if(calendarDiv != null && isNeedDeleteDiv){
			calendarDiv.innerHTML = "";
			calendarDiv.parentNode.removeChild(calendarDiv);
			calendarDiv = null;			
		}
	}
	/**
	 *初始化函数，提供对外接口 
	 */
	function init(id){
		node = $(id);
		node.onclick = caretCalendarDIV;
		addEventListener(node,'click',caretCalendarDIV);
		addEventListener(node,'blur', distoryCalendar);
		addEventListener(node,'focus', distoryCalendar);
	}
	/**
	 *年份减1 
	 */
	function minusYear() {
		year = year - 1;
		clearTable();
		createCalendar();
	}
	/**
	 *年份加1 
	 */
	function addYear() {
		year = year + 1;
		clearTable();
		createCalendar();
	}
	/**
	 *月份减1，当月份小于0的时候，月份等于11，年份减1 
	 */
	function minusMonth() {
		month = month - 1;
		if (month < 0) {
			month = 11;
			year = year - 1;
		}
		clearTable();
		createCalendar();
	}
	/**
	 *月份加1，当月份大于11时，月份等于0，年份 
	 */
	function addMonth() {
		month = month + 1;
		if (month > 11) {
			month = 0;
			year = year + 1;
		}
		clearTable();
		createCalendar();
	}
	
	Calender = function(){};
	Calender.prototype.init = init;
})();

HTML代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="test2.js"></script>
	</head>
	<body>
		<input type="text" id = 'test'>
		<input type="text" id = 'other'>
	</body>
	<script type="text/javascript">
		var calender = new Calender();
		calender.init("test");
		var other = new Calender();
		other.init("other");
	</script>
</html>