js实现的日期控件

var DatePicker = function() {
	var $ = function(i) {
		return document.getElementById(i)
	}, addEvent = function(o, e, f) {
		o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent(
				'on' + e, function() {
					f.call(o)
				})
	}, getPos = function(el) {
		for (var pos = {
			x : 0,
			y : 0
		}; el; el = el.offsetParent) {
			pos.x += el.offsetLeft;
			pos.y += el.offsetTop;
		}
		return pos;
	}
	var init = function(n, config) {
		window[n] = this;
		Date.prototype._fd = function() {
			var d = new Date(this);
			d.setDate(1);
			return d.getDay()
		};
		Date.prototype._fc = function() {
			var d1 = new Date(this), d2 = new Date(this);
			d1.setDate(1);
			d2.setDate(1);
			d2.setMonth(d2.getMonth() + 1);
			return (d2 - d1) / 86400000;
		};
		this.n = n;
		this.config = config;
		this.D = new Date;
		this.el = $(config.inputId);
		this.el.title = this.n + 'DatePicker';
		this.update();
		this.bind();
	}
	init.prototype = {
		update : function(y, m) {
			var con = [], week = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], D = this.D, _this = this;
			fn = function(a, b) {
				return '<td title="' + _this.n
						+ 'DatePicker" class="noborder hand" οnclick="'
						+ _this.n + '.update(' + a + ')">' + b + '</td>'
			}, _html = '<table cellpadding=0 cellspacing=2>';
			y && D.setYear(D.getFullYear() + y);
			m && D.setMonth(D.getMonth() + m);
			var year = D.getFullYear(), month = D.getMonth() + 1, date = D
					.getDate();
			for (var i = 0; i < week.length; i++)
				con.push('<td title="' + this.n
						+ 'DatePicker" class="noborder">' + week[i] + '</td>');
			for (var i = 0; i < D._fd(); i++)
				con.push('<td title="' + this.n
						+ 'DatePicker" class="noborder"> </td>');
			for (var i = 0; i < D._fc(); i++)
				con.push('<td class="hand" οnclick="' + this.n + '.fillInput('
						+ year + ', ' + month + ', ' + (i + 1) + ')">'
						+ (i + 1) + '</td>');
			var toend = con.length % 7;
			if (toend != 0)
				for (var i = 0; i < 7 - toend; i++)
					con.push('<td class="noborder"> </td>');
			_html += '<tr>' + fn("-1, null", "<<") + fn("null, -1", "<")
					+ '<td title="' + this.n
					+ 'DatePicker" colspan=3 class="strong">' + year + '/'
					+ month + '/' + date + '</td>' + fn("null, 1", ">")
					+ fn("1, null", ">>") + '</tr>';
			for (var i = 0; i < con.length; i++)
				_html += (i == 0 ? '<tr>' : i % 7 == 0 ? '</tr><tr>' : '')
						+ con[i] + (i == con.length - 1 ? '</tr>' : '');
			!!this.box ? this.box.innerHTML = _html : this.createBox(_html);
		},
		fillInput : function(y, m, d) {
			var s = this.config.seprator || '/';
			this.el.value = y + s + m + s + d;
			this.box.style.display = 'none';
		},
		show : function() {
			var s = this.box.style, is = this.mask.style;
			s['left'] = is['left'] = getPos(this.el).x + 'px';
			s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight
					+ 'px';
			s['display'] = is['display'] = 'block';
			is['width'] = this.box.offsetWidth - 2 + 'px';
			is['height'] = this.box.offsetHeight - 2 + 'px';
		},
		hide : function() {
			this.box.style.display = 'none';
			this.mask.style.display = 'none';
		},
		bind : function() {
			var _this = this;
			addEvent(document, 'click', function(e) {
						e = e || window.event;
						var t = e.target || e.srcElement;
						if (t.title != _this.n + 'DatePicker') {
							_this.hide()
						} else {
							_this.show()
						}
					})
		},
		createBox : function(html) {
			var box = this.box = document.createElement('div'), mask = this.mask = document
					.createElement('iframe');
			box.className = this.config.className || 'datepicker';
			mask.src = 'javascript:false';
			mask.frameBorder = 0;
			box.style.cssText = 'position:absolute;display:none;z-index:9999';
			mask.style.cssText = 'position:absolute;display:none;z-index:9998';
			box.title = this.n + 'DatePicker';
			box.innerHTML = html;
			document.body.appendChild(box);
			document.body.appendChild(mask);
			return box;
		}
	}
	return init;
}();
onload = function() {
	new DatePicker('DateTime', {
				inputId : 'dateTxt',
				className : 'date-picker-wp',
				seprator : '-'
			});
}

下面是在html中调用的代码：

<input type="text" name="birth" id="dateTxt"/>