zoukankan      html  css  js  c++  java
  • 日期选择控件 完美支持XHTML(JavaScript)

    新版本实现功能:
    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("&nbsp;一月","&nbsp;二月","&nbsp;三月","&nbsp;四月","&nbsp;五月","&nbsp;六月","&nbsp;七月","&nbsp;八月","&nbsp;九月","&nbsp;十月","十一月","十二月");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;20px">');write('&nbsp;<select id="tbpd_v15" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="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('&nbsp;<select id="tbpd_v17" onChange="pd_f14(pd_v15.value, pd_v17.value)" DTtag="Won" style="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('&nbsp;<input type="button" name="PrevMonth" value=">" onclick="pd_f6()" style="height:20px;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\'">&nbsp;&nbsp;清空</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");};

  • 相关阅读:
    Hibernate工作原理
    Java jar包查询下载方法
    http状态码(HTTP Status Code)
    Android Broadcast Receiver (广播接收者)
    Android ViewPager组件
    Android Activity属性
    Android XML Drawable
    Android 样式布局
    Android Activity的LaunchMode四种模式
    Android Layout布局
  • 原文地址:https://www.cnblogs.com/dylan/p/739978.html
Copyright © 2011-2022 走看看