一个纯Javascript脚本的datepicker

if(typeof(mksword) == "undefined"){
	mksword = new Object();
}

mksword.DatePicker = function(id){
	this.Base = document.getElementById(id);
	this.PromptBase = document.createElement("div");
	this.PromptBase.style.position = "absolute";
	this.PromptBase.style.top = this.getPos(this.Base).y + 21;
	this.PromptBase.style.left = this.getPos(this.Base).x;
	this.PromptBase.style.border = "1px Black solid";
	this.PromptBase.style.backgroundColor="#FFCC80";
	this.PromptBase.style.visibility = "hidden";
	this.PromptBase.style.zIndex = "99";
	this.PromptBase.id = id + "_list";
	document.body.appendChild(this.PromptBase);
	var d = new Date();
	this.Year = d.getFullYear();
	this.Month = d.getMonth();
	this.Date = d.getDate();
	this.Id = id + "_Picker";
	window[this.Id] = this;
	var ref = this;
	this.Base.onfocus = function(){
		ref.showCalendar();
	}
	this.showDate();
}

mksword.DatePicker.prototype.Base;

mksword.DatePicker.prototype.PromptBase;

mksword.DatePicker.prototype.Id;

mksword.DatePicker.prototype.getPos = function(el){
	for(var pos = {x:0,y:0};el;el = el.offsetParent){
		pos.y += el.offsetTop;
		pos.x += el.offsetLeft;
	}
	return pos;
}

mksword.DatePicker.prototype.Year;
mksword.DatePicker.prototype.Month;
mksword.DatePicker.prototype.Date;

mksword.DatePicker.prototype.showDate = function(){	
	this.Base.value = this.Year+"年"+(this.Month+1)+"月"+this.Date+"日";
	this.PromptBase.style.visibility = "hidden";
}

mksword.DatePicker.prototype.showCalendar = function(){
	var str = "<div><span οnclick='"+this.Id+".PY()'><<</span> <span οnclick='"+this.Id+".PM()'><</span>"
		+" <input id='"+this.Id+"_Lb"+"' type='text' value='"+this.Year+"年"+(this.Month+1)+"月"+this.Date+"日"
		+"'/> <span οnclick='"+this.Id+".NM()'>></span> <span οnclick='"+this.Id+".NY()'>>></span></div>"
		+"<div id='"+this.Id+"_DatePane"+"'><table cellpadding=\"0\" cellspacing=\"0\" style=\"font-size:18pt;width:240px\"><tr><th><font color='red'>日</font></th><th>一</th><th>二</th><th>三</th><th>四</th>"
		+"<th>五</th><th><font color='red'>六</font></th></tr>";
	var con = [];
	var d1 = new Date();
	d1.setFullYear(this.Year,this.Month,1);
	var v1 = d1.getDay();
	for(var wb = 0; wb < v1; wb++)
		con.push(" ");
	var d2 = new Date();
	d2.setFullYear(this.Year,this.Month + 1,1);
	var v2 = (d2 - d1)/ 86400000;
	for(var db = 0; db < v2; db++){
		con.push("<span οnclick='"+this.Id+".Selected("+(db+1)+")'>"+(db+1)+"</span>");
	}
	var tend = con.length % 7;
	if(tend != 0)
		for(var td = 0;td < 7 - tend;td++)
			con.push(" ");
	var std = 0;
	for(var itr = 0;itr < con.length; itr++){
		if(itr == 0)
			str += "<tr><td><font color='red'>"+con[itr]+"</font></td>";
		else if(itr%7 == 0)
			str += "</tr><tr><td><font color='red'>"+con[itr]+"</font></td>";
		else if((itr - std*7)%6 == 0 && itr > 0){
			str += "<td><font color='red'>"+con[itr]+"</font></td>";
			std++;
		}
		else if(itr == con.length - 1)
			str += "</tr>";
		else
			str += "<td>"+con[itr]+"</td>";
	} 
	str += "</table></div>"; 
	this.PromptBase.innerHTML = str;
	this.PromptBase.style.visibility = "visible";
}

mksword.DatePicker.prototype.UpdateLabel = function(){
	var lb = document.getElementById(this.Id+"_Lb");
	lb.value = this.Year+"年"+(this.Month+1)+"月"+this.Date+"日";
	this.showCalendar();
}

mksword.DatePicker.prototype.Selected = function(date){
	this.Date = date;
	this.showDate();
	this.PromptBase.style.visibility = "hidden";
}

mksword.DatePicker.prototype.PY = function(){
	this.Year--;	
	this.showDate();
	this.UpdateLabel();
}

mksword.DatePicker.prototype.PM = function(){
	this.Month--;	
	this.showDate();
	this.UpdateLabel();
}

mksword.DatePicker.prototype.NY = function(){
	this.Year++;	
	this.showDate();
	this.UpdateLabel();
}

mksword.DatePicker.prototype.NM = function(){
	this.Month++;	
	this.showDate();
	this.UpdateLabel();
}

这是一个纯脚本的datepicker

用法是

<input id="test" type="text"/>
<script language="javascript" type="text/javascript">
var x = new mksword.DatePicker("test");
</script>