点击文本框弹出日期

JS文件（birthday.js）： 

//  JavaScript Document
// 日历
var  date_start,date_end,g_object
var  today  =   new  Date();
var  separator = " - " ;
var  inover = false ;

// mode :时间变换的类型0-年 1-月 2-直接选择月
function  change_date(temp,mode)
... {
var t_month,t_year
if (mode)...{
if(mode==1)
t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
else
t_month=parseInt(temp)
if (t_month<cele_date_month.options(0).text) ...{
cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
change_date(parseInt(cele_date_year.value,10)-1,0);
}
else...{
if (t_month>cele_date_month.options(cele_date_month.length-1).text)...{
cele_date_month.value=cele_date_month.options(0).text;
change_date(parseInt(cele_date_year.value,10)+1,0);
} 
else
...{cele_date_month.value=t_month;
set_cele_date(cele_date_year.value,cele_date_month.value); 
}
}
} 
else...{
t_year=parseInt(temp,10);

if (t_year<cele_date_year.options(0).text) ...{
cele_date_year.value=cele_date_year.options(0).text;
set_cele_date(cele_date_year.value,1); 
}
else...{
if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10))...{
cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
set_cele_date(cele_date_year.value,12); 
} 
else
...{cele_date_year.value=t_year;
set_cele_date(cele_date_year.value,cele_date_month.value); 
}
}
}

window.cele_date.focus();

}

// 初始化日历
function  init(d_start,d_end)
... {
var temp_str;
var i=0
var j=0
date_start=new Date(1980,7,1)
date_end=new Date(2004,8,1)
document.writeln("<div name="cele_date" id="cele_date" style="display:none" style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">-</div>");
window.cele_date.innerHTML="";
temp_str="<table border="1" bgcolor="#DDDDDD" bordercolor="white"><tr><td colspan=7 οnmοuseοver="overcolor(this)">";
temp_str+="<input type="Button" value="<<" οnclick="change_date(-1,1)" οnmοuseοver="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">-";

temp_str+=""
temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" οnchange="change_date(this.value,0)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1900;i<=2020;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" οnchange="change_date(this.value,2)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1;i<=12;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<input type="Button" value=">>" οnclick="change_date(1,1)" οnmοuseοver="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">";

temp_str+="</td></tr><tr><td οnmοuseοver="overcolor(this)">"
temp_str+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"
temp_str+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";
for (i=1 ;i<=6 ;i++)
...{
temp_str+="<tr>";
for(j=1;j<=7;j++)...{
temp_str+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#000000" language="javascript" οnmοuseοver="overcolor(this)" οnmοuseοut="outcolor(this)" οnclick="td_click(this)">?</td>"
}
temp_str+="</tr>" 
}
temp_str+="</td></tr></table>";
window.cele_date.innerHTML=temp_str;
}
function  set_cele_date(year,month)
... {
var i,j,p,k
var nd=new Date(year,month-1,1);
event.cancelBubble=true;
cele_date_year.value=year;
cele_date_month.value=month; 
k=nd.getDay()-1
var temp;
for (i=1;i<=6;i++)
for(j=1;j<=7;j++)
...{
eval("c"+i+"_"+j+".innerHTML=""");
eval("c"+i+"_"+j+".bgColor="#DDDDDD"");
eval("c"+i+"_"+j+".style.cursor="hand"");
}
while(month-1==nd.getMonth())
...{ j=(nd.getDay() +1);
p=parseInt((nd.getDate()+k) / 7)+1;
eval("c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");
if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear()))...{
eval("c"+p+"_"+j+".bgColor="#EFFB64"");
}
if (nd>date_end || nd<date_start)
...{
eval("c"+p+"_"+j+".bgColor="#FF9999"");
eval("c"+p+"_"+j+".style.cursor="text"");
}
nd=new Date(nd.valueOf() + 86400000)
}
}
// 续

// s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；
function  show_cele_date(eP,d_start,d_end,t_object)
... {
window.cele_date.style.display="";
window.cele_date.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop; 
var eH = eP.offsetHeight+eT; 
var dH = window.cele_date.style.pixelHeight; 
var sT = document.body.scrollTop; 
var sL = document.body.scrollLeft; 
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5; 
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
if (d_start!="")...{
if (d_start=="today")...{
date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
}else...{
s=d_start.split(separator);
date_start=new Date(s[0],s[1]-1,s[2]);
}
}else...{
date_start=new Date(1900,1,1);
}

if (d_end!="")...{
s=d_end.split(separator);
date_end=new Date(s[0],s[1]-1,s[2]);
}else...{
date_end=new Date(3000,1,1);
}

g_object=t_object

cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";

window.cele_date.focus();

}
function  td_click(t_object)
... {
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 ) 
...{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
...{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;

g_object.value=year+separator+month+separator+day;
window.cele_date.style.display="none";};
}

}
function  h_cele_date()
... {
window.cele_date.style.display="none";
}

function  overcolor(obj)
... {
if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";

inover=true;
window.cele_date.focus();

}

function  outcolor(obj)
... {
obj.style.color = "#000000";
inover=false;

}

function  getNow(o) ... {
var Stamp=new Date();
var year = Stamp.getYear();
var month = Stamp.getMonth()+1;
var day = Stamp.getDate();
if(month<10)...{
month="0"+month;
}
if(day<10)...{
day="0"+day;
}
o.value=year+separator+month+separator+day;
}

function  hilayer()
... {
if (inover==false)
...{
var lay=document.all.cele_date;
lay.style.display="none";
}
}
function  getlayerfocus()
... {
inover=true;
}
function  lostlayerfocus()
... {
inover=false;
}
init();
// 日历结束

html文件（testdate.html）：

< html >
< head >
<!--  引入JS文件 -->
< SCRIPT  src ="birthday.js" ></ SCRIPT >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > datetest </ title >
</ head >

< body >
< form  name ="form1"  method ="post"  action ="" >
< table  width ="500"  border ="0"  align ="center" >
< tr >
< td >
< div  align ="center" >
时间:
< input  type ="text"  name ="txtdate"  onfocus ="show_cele_date(txtdate,'','',txtdate)" > <!--  调用函数  -->
</ div ></ td >
</ tr >
</ table >
</ form >
</ body >
</ html >