js日历控件

核心思路参考了群里的MK桑的，在此谢过。

(function(){

	var db = document.body;

	var Calendar = function(opts){

		return new Calendar.prototype.init(opts);

	};

	Calendar.prototype = {

		constructor:Calendar,

		init:function(opts){

			this.opts = extend({

				target:'',

				initial:'2012/09/27',

				format:'YYYY-MM-DD',

				callback:function(){}

			},opts||{});

			var _this = this;

			this.target = $(this.opts.target);

			addEvent(this.target,'click',function(){_this.create();});

		},

		create:function(){

			var de = this.target.getAttribute('data-date');

			this.defaultValue = this.defaultValue || (de && new Date(de)) || (this.initial ? new Date(this.initial) : new Date());

			var year = this.defaultValue.getFullYear(),month = this.defaultValue.getMonth(),date =this.defaultValue.getDate(), _this = this;

			var days = this.calculateDays(year,month),fragment = document.createDocumentFragment(),ul = document.createElement('ul');

			this.close();

			this.wrapper = createEl('<div id="date_wrapper"><div id="date_header"><div id="yearBox"><span id="prevYear">«</span><em>'+year+'</em><span id="nextYear">»</span></div><div id="monthBox"><span id="prevMonth">«</span><em>'+(month+1)+'</em><span id="nextMonth">»</span></div></div><div id="date_weekBox"><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul></div><div id="date_dateBox"></div></div>',db);

			

			for(var i=0,len=days.length;i<len;i++){

				var li = document.createElement('li');

				var y = days[i].getFullYear(),m = days[i].getMonth(),d = days[i].getDate();

				var f = m == month;

				var fl = year == y && month == m && date == d;

				li.setAttribute('data-date',days[i]);

				li.innerHTML = d;

				addClass(li,f ? 'black' : 'gray');

				fl && addClass(li,'current');

				fragment.appendChild(li);

			}

			ul.appendChild(fragment);

			$('date_dateBox').appendChild(ul);

			

			setPosition(this.wrapper,this.target);

			

			addEvent($('prevYear'),'click',function(){

				_this.defaultValue.setMonth(_this.defaultValue.getMonth()-12,date);

				_this.create();

			});

			addEvent($('nextYear'),'click',function(){

				_this.defaultValue.setMonth(_this.defaultValue.getMonth()+12,date);

				_this.create();

			});

			addEvent($('prevMonth'),'click',function(){

				_this.defaultValue.setMonth(_this.defaultValue.getMonth()-1,date);

				_this.create();

			});

			addEvent($('nextMonth'),'click',function(){

				_this.defaultValue.setMonth(_this.defaultValue.getMonth()+1,date);

				_this.create();

			});

			addEvent(ul,'click',function(e){

				e = e || window.event;

				var target = e.target || e.srcElement;

				if(hasClass(target,'black')){

					var date = target.getAttribute('data-date');

					_this.target.setAttribute('data-date',date);

					_this.defaultValue = new Date(date);

					if(_this.target.type == 'text') _this.target.value = formatDate(date,_this.opts.format);

					_this.opts.callback && _this.opts.callback(date);

					_this.close();

				};

			});			

		},

		set:function(d){

			this.defaultValue = d ? new Date(d) : new Date();

			this.create();

		},

		get:function(){

			return this.defaultValue;

		},

		close:function(){

			if(!this.wrapper) return;

			this.wrapper.parentNode.removeChild(this.wrapper);

			this.wrapper = null;

		},

		trigger:function(){

			this.create();

		},

		calculateDays:function(y,m){

			var offset, dFirstDay = new Date(y, m, 1), dLastDay = new Date(y, m + 1, 0), arr = [];

			dFirstDay.setMonth(m, 1 - dFirstDay.getDay());

			dLastDay.setMonth(m, dLastDay.getDate() + 6 - dLastDay.getDay());

			offset = parseInt((dLastDay - dFirstDay) / (1000*60*60*24)) + 1;

			var _y = dFirstDay.getFullYear(), _m = dFirstDay.getMonth(), _d = dFirstDay.getDate();

			for(var i=0; i<offset; i++){

				var d = new Date(_y, _m, _d + i);

				arr.push(d);

			}

			return arr;

		}

	};

	Calendar.prototype.init.prototype = Calendar.prototype;

	window.Calendar = Calendar;

	

	

	function $(id){

		return typeof id == 'string' ? document.getElementById(id) : id;

	};

	function createEl(str,parent){

		var div = document.createElement('div'),el;

		div.innerHTML = str;

		el = div.firstChild;

		parent && parent.appendChild(el);

		return el;

	};

	function extend(t,s){

		for(var i in s ) t[i] = s[i];

		return t;

	};

	function getElementPos(el){

		var x = 0,y=0;

		if(el.getBoundingClientRect){

			var pos = el.getBoundingClientRect();

			var d_root = document.documentElement,db = document.body;

			x = pos.left + Math.max(d_root.scrollLeft,db.scrollLeft) - d_root.clientLeft;

			y = pos.top + Math.max(d_root.scrollTop,db.scrollTop) - d_root.clientTop;

		}else{

			while(el != db){

				x += el.offsetLeft;

				y += el.offsetTop;

				el = el.offsetParent;

			};

		};

		return {

			x:x,

			y:y

		};

	};

	function setPosition(target,reference){

		var pos = getElementPos(reference);

		var left = pos.x,top = pos.y;

		var width = reference.offsetWidth,height = reference.offsetHeight;

		var w = target.offsetWidth,h = target.offsetHeight;

		var st = Math.max(document.documentElement.scrollTop,document.body.scrollTop),sl = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);

		var cw =  document.documentElement.clientWidth,ch = document.documentElement.clientHeight;

		if(ch+st-top-height-1 > h ){

			target.style.top = top + height + 1 + 'px';

		}else{

			target.style.top = top - h - 1 + 'px';

		};

		if(cw+sl-left-width > w){

			target.style.left = left + 'px';

		}else{

			target.style.left = left + width - w + 'px';

		};

	};

	function addEvent(el,type,fn){

		if(typeof el.addEventListener != 'undefined'){

			el.addEventListener(type,fn,false);

		}else if(typeof el.attachEvent != 'undefined'){

			el.attachEvent('on'+type,fn);

		}else{

			el['on'+type] = fn;

		};

	};

	function formatDate(t,tpl){

		var strs=[], w, keys, year, val,t= t ? new Date(t) : new Date();

		w = 'FullYear,Month,Date'.split(',');

		keys = [/YYYY/g, /YY/g, /MM/g, /M/g, /DD/g, /D/g];

		for (var i = 0; i < 3; i++) {

			val = t['get' + w[i]]() + (w[i] === 'Month' ? 1 : 0);

			strs.push(('0' + val).slice( - 2), val)

		};

		year = [strs[1], strs[0]].concat(strs.slice(2));

		for (var i = 0; i < 6; i++) {

			tpl = tpl.replace(keys[i], year[i])

		};

		return tpl;

	};

	function clear(str){

		return str.replace(/^\s+|\s+$/g,'').replace(/\s+/,' ');

	};

	function hasClass(el,oClass){

		return (' '+el.className+' ').indexOf(' '+oClass+' ') > -1;

	};

	function addClass(el,oClass){

		if(hasClass(el,oClass)) return;

		var c = el.className;

		el.className = clear(c? c + ' '+oClass : oClass);

	};

	function removeClass(el,oClass){

		if(!hasClass(el,oClass)) return;

		var c = el.className;

		el.className = clear((' '+c+' ').replace(' '+oClass+' ',''));

	};

})();

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title></title>

	<style type="text/css">

		* {padding:0;margin:0;}

		body { font-family:Arial, Helvetica, sans-serif; font-size:12px;}

		ul { list-style:none;}

		#date_wrapper { width:287px; position:absolute; overflow:hidden; background:#fff;}

		#date_header {height:35px;overflow:hidden;}

		#date_header span {display:inline-block;*display:inline;*zoom:1; width:20px;height:20px;line-height:20px;text-align:center;margin:0 5px;vertical-align: 2px; cursor:pointer;font-size:15px;font-weight:bold; color:#fff;}

		#date_header em {font-style: normal; font-weight;bold; font-size:18px; color:#fff;}

		#yearBox { background:#254b7c;float:left;width:204px;height:35px; line-height:35px; text-align:center;}

		#monthBox { background:#436ca5;float:left;width:82px;height:35px; line-height:35px; text-align:center;}

		#date_weekBox li { display:inline-block;*display:inline;*zoom:1;  width:40px; height:30px; margin-right:1px; line-height:30px; text-align:center; background:#c2d7ec; color:#254b7c;}

		#date_dateBox li { display:inline-block;*display:inline;*zoom:1;  width:40px; height:40px; line-height:40px; text-align:center; background:#eaf3fa;margin-right:1px; margin-bottom:1px; font-size:15px; cursor:pointer; color:#254b7c;}

		#date_dateBox li.gray { color:#a6c0d7;}

		#date_dateBox li.current { background:#254b7c; color:#fff;font-weight:bold; }

		input[type="button"] { padding:3px 10px;}

		#calendar {position:absolute;top:400px;left:500px;width:274px;height:30px;line-height:30px;padding:0 5px;border:1px solid #C2D7EC; color:#254b7c;}

	</style>

</head>

<body>

	<input type="text" id="calendar"/>

	<input type="button" id="trigger" value=" trigger" />

	<input type="button" id="set" value="set" />

	<input type="button" id="get" value="get" />

	<input type="button" id="close" value="close" />

	<div style="height:1500px;"></div>

	<script type="text/javascript" src="calendar.js"></script>

	<script type="text/javascript">

		var trigger = document.getElementById('trigger');

		var set = document.getElementById('set');

		var get = document.getElementById('get');

		var close = document.getElementById('close');

		var a = Calendar({

			target:'calendar'

		});

		trigger.onclick = function(){

			a.trigger();

		};

		set.onclick = function(){

			a.set();

			a.trigger();

		};

		get.onclick = function(){

			alert(a.get());

		};

		close.onclick = function(){

			a.close();

		}

	</script>

</body>

</html>

测试时可以将input定义到浏览器的四个角上试下