自定义日历插件-优快云博客

本文介绍了一个基于JavaScript实现的自定义日历插件，该插件能够根据用户点击触发显示一个日历面板，允许用户选择日期，并回调指定函数更新输入框中的日期。

核心思路参考了群里的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定义到浏览器的四个角上试下