比较简单,可能还存在bug,不过兼容IE,firefox,opera.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>日期控件</title>
<script type="text/javascript">
var DateComp=function(){
this.input_text=false;
this.contain_date=false;
this.contain_date_top=false;
this.contain_date_main=false;
var _this=this;
this.date=false;
var pub={
init:function(){
_this=this;
this.date=new Date();
this.input_text=document.createElement("input");
this.input_text.type="text";
this.input_text.οnclick=function(){
_this.createDate();
}
this.style();
},
createDate:function(){
this.contain_date=document.createElement("div");
this.contain_date_top=document.createElement("div");
this.contain_date_main=document.createElement("div");
var obj=this.input_text;
with(this.contain_date.style){
position = "absolute";
var ttop=obj.offsetTop+obj.offsetHeight;
var tleft=obj.offsetLeft;
while(obj=obj.offsetParent){
ttop+=obj.offsetTop;
tleft+=obj.offsetLeft;
}
top=ttop;
left=tleft;
width="153px";
height="150px";
fontSize="8pt";
paddingTop="2px";
textAlign="center";
border="1px solid #66ccff";
}
with(this.contain_date_top.style){
width="100%";
height="25px";
background="#66ccff";
}
with(this.contain_date_main.style){
width="100%";
height="120px";
background="#ffffff";
}
this.year=document.createElement("select");
for(var i=this.date.getFullYear()-10;i<this.date.getFullYear()+10;i++)
{
this.year.options.add(new Option(i+"年",i));
}
this.year.value=this.date.getFullYear();
this.month=document.createElement("select");
for(var i=1;i<13;i++)
{
this.month.options.add(new Option(i+"月",i));
}
this.month.value=this.date.getMonth()+1;
this.year.οnchange=function(){
_this.showDate(this.value,_this.month.value);
}
this.month.οnchange=function(){
_this.showDate(_this.year.value,this.value);
}
this.contain_date.appendChild(this.contain_date_top);
this.contain_date_top.appendChild(this.year);
this.contain_date_top.appendChild(this.month);
this.contain_date.appendChild(this.contain_date_main);
document.body.appendChild(this.contain_date);
this.showDate(2009,9);
},
showDate:function(year,month){
this.contain_date_main.innerHTML="";
var arr=new Array("日","一","二","三","四","五","六");
var table=document.createElement("table");
var thead=document.createElement("thead");
var tbody=document.createElement("tbody");
var tr_thead=document.createElement("tr");
for(var j in arr){
var td=document.createElement("th");
td.innerHTML=arr[j];
tr_thead.appendChild(td);
}
for(var i=0;i<5;i++){
var tr_tbody=document.createElement("tr");
for(var j in arr){
var td=document.createElement("td");
td.οnclick=function(){
_this.input_text.value=_this.year.value+"-"+((_this.month.value>=10)?(_this.month.value):("0"+_this.month.value))+"-"+((parseInt(this.innerHTML)>=10)?(this.innerHTML):("0"+this.innerHTML));
document.body.removeChild(_this.contain_date);
}
td.οnmοuseοver=function(){
this.style.background="#ccffcc";
}
td.οnmοuseοut=function(){
this.style.background="#ffffff";
}
tr_tbody.appendChild(td);
}
tbody.appendChild(tr_tbody);
}
thead.appendChild(tr_thead);
table.appendChild(thead);
table.appendChild(tbody);
table.border="0";
table.cellSpacing="0";
table.cellpadding="0";
table.bgcolor="gray";
with(table.style){
width="100%";
height="100%";
}
with(thead.style){
background="#ccffff";
}
var monthCount=new Date(year,month,0).getDate();
var i=1;
for(var j=1;j<monthCount+1;j++){
if(new Date(year,month-1,j).getDay()==6){
table.rows[i++].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
}else{
table.rows[i].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
}
if(j==new Date().getDate()){
table.rows[i].cells[new Date(year,month-1,j).getDay()].style.background="#ccff00";
}
}
this.contain_date_main.appendChild(table);
},
style:function(){
with(this.input_text.style){
width="150px";
}
},
getComponent:function(){
return this.input_text;
}
};
pub.init();
return pub;
}
</script>
<script type="text/javascript">
window.οnlοad=function(){
var date=new DateComp();
document.body.appendChild(date.getComponent());
}
</script>
</head>
<body>
</body>
</html>