新版本实现功能:
1、完美支持XHTML,于IE和FireFox长时间测试正常
2、支持同页面多个日期调用
3、可扩展日期输入框的HTML属性,用于添加个性样式或者特殊属性。
效果如下:

调用代码:
说明:arrowtag用于动态生成日期组件,第一个参数为组件ID,第二参数为默认日期,第三参数为扩展属性,上面示例代码实现了定义TAB顺序的功能。可在任何地方调用此代码(PopDP.js)
var pd_v1=document.all;var pd_v2=new Array();var pd_v3=new Array();var pd_v5="#808080";var pd_v8="#FFAC11";var pd_v7="#FF335C";var pd_v4="#F1F7D4";var pd_v20="#B4F8AF";var pd_v6="#00B300";var pd_v9=new Date();var pd_v12=pd_v9.getFullYear();var pd_v11=pd_v9.getMonth()+1;var pd_v10=pd_v9.getDate();var pd_v15,pd_v17;var pd_v16;var pd_v14;function pd_f7(ap){pd_v14=document.getElementById(ap);if(pd_v14.value!=""){var ag=pd_v14.value;var l=ag.split("-");pd_f11(l[0],l[1]);}else{pd_f11(pd_v12,pd_v11);};var pd_f15=pd_f4(ap);with(pd_v16.style){left=(pd_f15.x)+"px";top=(pd_f15.y+pd_v14.offsetHeight+1)+"px";width=(pd_v16.offsetWidth)+"px";height=(pd_v16.offsetHeight)+"px";if(pd_v1)pd_f13(pd_f15);visibility=\'visible\';};pd_v16.focus();};function pd_f9(a,b,al){pd_v14.value=a+"-"+b+"-"+al;pd_f5();};function pd_f5(){with(pd_v16.style){left="0px";top="0px";visibility="hidden";};for(i in pd_v2)pd_v2[i].style.visibility="visible";pd_v2.length=0;};function pd_f10(ar){var a=parseInt(pd_v15.value);var b=parseInt(pd_v17.value);with(ar){ax=pd_v4;var al=parseInt(innerHTML);b+=parseInt(DTtag);if(b<1){a--;b=12;}else if(b>12){a++;b=1;};};pd_f9(a,b,al);};function pd_f15(bb,ba){this.x=bb;this.y=ba;};function pd_f3(a,b,ww,t){var ao=new Array("日","一","二","三","四","五","六");var aa=\' bgcolor="\'+pd_v4+\'" bordercolor="\'+pd_v4+\'" valign="middle" align="center" height="\'+ww+\'" style="font-size:\'+t+\'px;\';with(document){write("<tr>");for(i=0;i<7;i++)write(\'<td \'+aa+\'color:#00B300">\'+ao[i]+\'</td>\');write(\'</tr>\');for(w=1;w<7;w++){write("<tr>");for(d=0;d<7;d++){write(\'<td id="cellText-\'+w+\'-\'+d+\'" \'+aa+\'cursor:pointer;" onMouseOver="this.bgColor=pd_v8" onMouseOut="this.bgColor=pd_v4" DTtag="0" onclick="pd_f10(this)">\');write(\'</td>\')};write(\'</tr>\');};};};function pd_f1(a,b){var o=new Array();for(i=1;i<7;i++)o[i]=new Array(i);var ak=new Date(a,b-1,1);var n=ak.getDay();var u=new Date(a,b,0).getDate();var z=new Date(a,b-1,0).getDate()-n+1;var ad=1;var as=1;for(d=0;d<7;d++)o[1][d]=(d<n)?-(z+d):ad++;for(w=2;w<7;w++)for(d=0;d<7;d++)o[w][d]=(ad<=u)?ad++:-(as++);return o;};function pd_f14(a,b){var q=pd_f1(a,b);var c;var i=0;for(w=0;w<6;w++)for(d=0;d<7;d++){c=document.getElementById("cellText-"+(w+1)+"-"+d);with(c){i++;if(q[w+1][d]<0){if(i<10){c.DTtag="-1";}else{c.DTtag="1";};style.color=pd_v5;innerHTML=-q[w+1][d];}else{c.DTtag="0";style.color=((d==0)||(d==6))?"#F00":"#000";innerHTML=q[w+1][d];};};};};function pd_f11(a,g){pd_v17.options[g-1].selected=true;for(i=0;i<pd_v15.length;i++)if(pd_v15.options[i].value==a)pd_v15.options[i].selected=true;pd_f14(a,g);};function pd_f8(){var g=pd_v17.value;var a=pd_v15.value;if(--g<1){g=12;a--;};pd_f11(a,g);};function pd_f6(){var g=pd_v17.value;var a=pd_v15.value;if(++g>12){g=1;a++;};pd_f11(a,g);};function pd_f13(){with(document.all.tags("SELECT")){for(i=0;i<length;i++)if((item(i).DTtag!="Won")&&pd_f12(item(i).id)){item(i).style.visibility="hidden";pd_v2[pd_v2.length]=item(i);};};};function pd_f12(ab){var k=document.getElementById(ab);with(pd_v16.style){var bd=parseInt(left);var bc=parseInt(top);var bf=bd+parseInt(width);var be=bc+parseInt(height);var ac=pd_f4(ab);return!((ac.x>bf)||(ac.x+k.offsetWidth<bd)||(ac.y>be)||(ac.y+k.offsetHeight<bc));};};function pd_f4(ab){var k=document.getElementById(ab);var au=new pd_f15(0,0);do{au.x+=k.offsetLeft;au.y+=k.offsetTop;k=k.offsetParent;}while(k.tagName!="BODY");return au;};function pd_f2(){pd_v14.value="";pd_f5();};var pd_v13=new Array(" 一月"," 二月"," 三月"," 四月"," 五月"," 六月"," 七月"," 八月"," 九月"," 十月","十一月","十二月");with(document){write(\'<div id="VicPopCal" onclick="event.cancelBubble=true" style="border:1px;visibility:hidden;position:absolute">\');write(\'<table border="0" bgcolor="\'+pd_v20+\'">\');write(\'<tr>\');write(\'<td valign="middle" align="center"><input type="button" name="PrevMonth" value="<" onClick="pd_f8()" style="height:20px;width:20px">\');write(\' <select id="tbpd_v15" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="width:70px;border: 1px solid #A7A6AA;font-size:9pt;background-color:\'+pd_v20+\';">\');for(i=1920;i<=2010;i++)write(\'<option value="\'+i+\'">\'+i+\'年</option>\');write(\'</select>\');write(\' <select id="tbpd_v17" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="width:70px;border: 1px solid #A7A6AA;font-size:9pt;background-color:\'+pd_v20+\';">\');for(i=0;i<12;i++)write(\'<option value="\'+(i+1)+\'">\'+pd_v13[i]+\'</option>\');write(\'</select>\');write(\' <input type="button" name="PrevMonth" value=">" onclick="pd_f6()" style="height:20px;width:20px">\');write(\'</td>\');write(\'</tr><tr>\');write(\'<td align="center">\');write(\'<div><table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#2CABF3"><tr><td><table border="0" cellspacing="1" width="100%" cellpadding="1">\');pd_f3(pd_v12,pd_v11,12,12);write(\'</table></td></tr></table></div>\');write(\'</td>\');write(\'</tr><tr><td align="center">\');write(\'<span onclick="pd_f9(pd_v12,pd_v11,pd_v10)" onMouseOver="this.style.color=pd_v7" onMouseOut="this.style.color=\\'#000\\'">今天:\'+pd_v12+\'-\'+pd_v11+\'-\'+pd_v10+\'</span>\');write(\'<span onclick="pd_f2()" onMouseOver="this.style.color=pd_v6" onMouseOut="this.style.color=\\'#000\\'"> 清空</span>\');write(\'</td></tr>\');write(\'</table></div>\');};document.onclick=function(e){if(pd_v3.length!=0){if(pd_v1)var ay=event.srcElement;else var ay=e.target;var af=false;for(i in pd_v3)if(ay.id==pd_v3[i])af=true;if(!af)pd_f5()};};function arrowtag(p,ai,zi){document.write(\'<input type="text" name="\'+p+\'" id="\'+p+\'" value="\'+ai+\'" size="10" style="text-align: center;" oncontextmenu="return false;" onDrag="return false;" onkeydown="return false;" onfocus="pd_f7(\\'\'+p+\'\\');return false;" onclick="pd_f7(\\'\'+p+\'\\');return false;" autocomplete="off" \'+zi+\'>\');pd_v3[pd_v3.length]=p;pd_v15=document.getElementById("tbpd_v15");pd_v17=document.getElementById("tbpd_v17");pd_v16=document.getElementById("VicPopCal");};
1、完美支持XHTML,于IE和FireFox长时间测试正常
2、支持同页面多个日期调用
3、可扩展日期输入框的HTML属性,用于添加个性样式或者特殊属性。
效果如下:
调用代码:
以下代码加于<head>和<head>之间
<script type="text/javascript" src="Js/PopDP.js"></script>
以下代码可加于页面任何地方
<script type="text/javascript">arrowtag(\'Birthday\',\'\',\'tabindex=11\');</script>
说明:arrowtag用于动态生成日期组件,第一个参数为组件ID,第二参数为默认日期,第三参数为扩展属性,上面示例代码实现了定义TAB顺序的功能。可在任何地方调用此代码(PopDP.js)
var pd_v1=document.all;var pd_v2=new Array();var pd_v3=new Array();var pd_v5="#808080";var pd_v8="#FFAC11";var pd_v7="#FF335C";var pd_v4="#F1F7D4";var pd_v20="#B4F8AF";var pd_v6="#00B300";var pd_v9=new Date();var pd_v12=pd_v9.getFullYear();var pd_v11=pd_v9.getMonth()+1;var pd_v10=pd_v9.getDate();var pd_v15,pd_v17;var pd_v16;var pd_v14;function pd_f7(ap){pd_v14=document.getElementById(ap);if(pd_v14.value!=""){var ag=pd_v14.value;var l=ag.split("-");pd_f11(l[0],l[1]);}else{pd_f11(pd_v12,pd_v11);};var pd_f15=pd_f4(ap);with(pd_v16.style){left=(pd_f15.x)+"px";top=(pd_f15.y+pd_v14.offsetHeight+1)+"px";width=(pd_v16.offsetWidth)+"px";height=(pd_v16.offsetHeight)+"px";if(pd_v1)pd_f13(pd_f15);visibility=\'visible\';};pd_v16.focus();};function pd_f9(a,b,al){pd_v14.value=a+"-"+b+"-"+al;pd_f5();};function pd_f5(){with(pd_v16.style){left="0px";top="0px";visibility="hidden";};for(i in pd_v2)pd_v2[i].style.visibility="visible";pd_v2.length=0;};function pd_f10(ar){var a=parseInt(pd_v15.value);var b=parseInt(pd_v17.value);with(ar){ax=pd_v4;var al=parseInt(innerHTML);b+=parseInt(DTtag);if(b<1){a--;b=12;}else if(b>12){a++;b=1;};};pd_f9(a,b,al);};function pd_f15(bb,ba){this.x=bb;this.y=ba;};function pd_f3(a,b,ww,t){var ao=new Array("日","一","二","三","四","五","六");var aa=\' bgcolor="\'+pd_v4+\'" bordercolor="\'+pd_v4+\'" valign="middle" align="center" height="\'+ww+\'" style="font-size:\'+t+\'px;\';with(document){write("<tr>");for(i=0;i<7;i++)write(\'<td \'+aa+\'color:#00B300">\'+ao[i]+\'</td>\');write(\'</tr>\');for(w=1;w<7;w++){write("<tr>");for(d=0;d<7;d++){write(\'<td id="cellText-\'+w+\'-\'+d+\'" \'+aa+\'cursor:pointer;" onMouseOver="this.bgColor=pd_v8" onMouseOut="this.bgColor=pd_v4" DTtag="0" onclick="pd_f10(this)">\');write(\'</td>\')};write(\'</tr>\');};};};function pd_f1(a,b){var o=new Array();for(i=1;i<7;i++)o[i]=new Array(i);var ak=new Date(a,b-1,1);var n=ak.getDay();var u=new Date(a,b,0).getDate();var z=new Date(a,b-1,0).getDate()-n+1;var ad=1;var as=1;for(d=0;d<7;d++)o[1][d]=(d<n)?-(z+d):ad++;for(w=2;w<7;w++)for(d=0;d<7;d++)o[w][d]=(ad<=u)?ad++:-(as++);return o;};function pd_f14(a,b){var q=pd_f1(a,b);var c;var i=0;for(w=0;w<6;w++)for(d=0;d<7;d++){c=document.getElementById("cellText-"+(w+1)+"-"+d);with(c){i++;if(q[w+1][d]<0){if(i<10){c.DTtag="-1";}else{c.DTtag="1";};style.color=pd_v5;innerHTML=-q[w+1][d];}else{c.DTtag="0";style.color=((d==0)||(d==6))?"#F00":"#000";innerHTML=q[w+1][d];};};};};function pd_f11(a,g){pd_v17.options[g-1].selected=true;for(i=0;i<pd_v15.length;i++)if(pd_v15.options[i].value==a)pd_v15.options[i].selected=true;pd_f14(a,g);};function pd_f8(){var g=pd_v17.value;var a=pd_v15.value;if(--g<1){g=12;a--;};pd_f11(a,g);};function pd_f6(){var g=pd_v17.value;var a=pd_v15.value;if(++g>12){g=1;a++;};pd_f11(a,g);};function pd_f13(){with(document.all.tags("SELECT")){for(i=0;i<length;i++)if((item(i).DTtag!="Won")&&pd_f12(item(i).id)){item(i).style.visibility="hidden";pd_v2[pd_v2.length]=item(i);};};};function pd_f12(ab){var k=document.getElementById(ab);with(pd_v16.style){var bd=parseInt(left);var bc=parseInt(top);var bf=bd+parseInt(width);var be=bc+parseInt(height);var ac=pd_f4(ab);return!((ac.x>bf)||(ac.x+k.offsetWidth<bd)||(ac.y>be)||(ac.y+k.offsetHeight<bc));};};function pd_f4(ab){var k=document.getElementById(ab);var au=new pd_f15(0,0);do{au.x+=k.offsetLeft;au.y+=k.offsetTop;k=k.offsetParent;}while(k.tagName!="BODY");return au;};function pd_f2(){pd_v14.value="";pd_f5();};var pd_v13=new Array(" 一月"," 二月"," 三月"," 四月"," 五月"," 六月"," 七月"," 八月"," 九月"," 十月","十一月","十二月");with(document){write(\'<div id="VicPopCal" onclick="event.cancelBubble=true" style="border:1px;visibility:hidden;position:absolute">\');write(\'<table border="0" bgcolor="\'+pd_v20+\'">\');write(\'<tr>\');write(\'<td valign="middle" align="center"><input type="button" name="PrevMonth" value="<" onClick="pd_f8()" style="height:20px;width:20px">\');write(\' <select id="tbpd_v15" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="width:70px;border: 1px solid #A7A6AA;font-size:9pt;background-color:\'+pd_v20+\';">\');for(i=1920;i<=2010;i++)write(\'<option value="\'+i+\'">\'+i+\'年</option>\');write(\'</select>\');write(\' <select id="tbpd_v17" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="width:70px;border: 1px solid #A7A6AA;font-size:9pt;background-color:\'+pd_v20+\';">\');for(i=0;i<12;i++)write(\'<option value="\'+(i+1)+\'">\'+pd_v13[i]+\'</option>\');write(\'</select>\');write(\' <input type="button" name="PrevMonth" value=">" onclick="pd_f6()" style="height:20px;width:20px">\');write(\'</td>\');write(\'</tr><tr>\');write(\'<td align="center">\');write(\'<div><table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#2CABF3"><tr><td><table border="0" cellspacing="1" width="100%" cellpadding="1">\');pd_f3(pd_v12,pd_v11,12,12);write(\'</table></td></tr></table></div>\');write(\'</td>\');write(\'</tr><tr><td align="center">\');write(\'<span onclick="pd_f9(pd_v12,pd_v11,pd_v10)" onMouseOver="this.style.color=pd_v7" onMouseOut="this.style.color=\\'#000\\'">今天:\'+pd_v12+\'-\'+pd_v11+\'-\'+pd_v10+\'</span>\');write(\'<span onclick="pd_f2()" onMouseOver="this.style.color=pd_v6" onMouseOut="this.style.color=\\'#000\\'"> 清空</span>\');write(\'</td></tr>\');write(\'</table></div>\');};document.onclick=function(e){if(pd_v3.length!=0){if(pd_v1)var ay=event.srcElement;else var ay=e.target;var af=false;for(i in pd_v3)if(ay.id==pd_v3[i])af=true;if(!af)pd_f5()};};function arrowtag(p,ai,zi){document.write(\'<input type="text" name="\'+p+\'" id="\'+p+\'" value="\'+ai+\'" size="10" style="text-align: center;" oncontextmenu="return false;" onDrag="return false;" onkeydown="return false;" onfocus="pd_f7(\\'\'+p+\'\\');return false;" onclick="pd_f7(\\'\'+p+\'\\');return false;" autocomplete="off" \'+zi+\'>\');pd_v3[pd_v3.length]=p;pd_v15=document.getElementById("tbpd_v15");pd_v17=document.getElementById("tbpd_v17");pd_v16=document.getElementById("VicPopCal");};