calendar.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. //调用方法:onclick="return Calendar('输入框ID');"
  2. var MonthDNum=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
  3. var MonthText=new Array("","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
  4. var Calendar_obj,Calendar_obj2;
  5. //var WriteHead=1;
  6. document.write('<iframe style="position:absolute;width:206px;z-index:1;display:none;" name="divCalendar" id="divCalendar" frameborder="0" scrolling="no"></iframe>')
  7. /*头部信息CSS及JS函数*/
  8. var HeadMsg='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
  9. '<html xmlns="http://www.w3.org/1999/xhtml">'+
  10. '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"><!--'+
  11. 'body,html{margin:0px;height:100%;background:#FFF;}a,li,input {font-family:"Verdana","Arial";font-size:12px;}'+
  12. 'a {height:18px;color:#000;padding-top:2px;text-decoration:none;display:block;}'+
  13. 'a:hover{height:17px;padding-top:1px;border:1px solid #000;background:#FFF;}'+
  14. '.CurrentDate {height:17px;padding-top:1px;border:1px solid #000;background: #FFF;}'+
  15. 'ul{list-style:none;margin:0px;padding:0px;overflow:hidden;}'+
  16. 'ul li{float:left;margin-left:1px;padding-top:1px;display:inline;text-align:center;width:28px;height:20px;}'+
  17. '#Tools {width:204px;background:#5563B0;padding:0px;}'+
  18. '#Tools li{padding-bottom:1px;}'+
  19. '#Tools a{color:#FFF;}'+
  20. '#Tools a:hover{border:1px solid #2E3665;background:#979FCE;}'+
  21. '#Title {width:204px;background:#CAD3E8;border-bottom:1px solid #000;}'+
  22. '#Title li{height:16px;padding-top:2px;}'+
  23. '#sYear,#sMonth {width:44px;height:16px;border:1px solid #88A9C9;border-right:0;padding-top:2px;}'+
  24. '#SArr {width:19px;height:18px;background:#E2EBF4;font-size:10px;text-align:center;color:#5563B0;border:1px solid #88A9C9;border-left:0;margin-right:3px;cursor:pointer;}'+
  25. '#Select {width:63px;border:1px solid #8AC;background:#FFF;height:146px;}'+
  26. '#Select a{height:16px;padding-left:3px;}'+
  27. '#Select a:hover{color:#000;background:#E2EBF4;padding-top:2px;border:0;}'+
  28. '#Select #SelectBn {background:#C7CDEF;font-size:8px;line-height:7px;height:7px;text-align:center;color:#5563B0;}'+
  29. '#Select #SelectBn:hover{background:#7682C1;color:#FFF;}#SArr,#sYear,#sMonth{float:left;}'+
  30. '#SelectYear,#SelectMonth{position:absolute;top:21px;z-index:1;overflow:hidden;display:none;}'+
  31. '--></style><scr'+
  32. 'ipt language="JavaScript">var mdown,sy,ey,sm,em,HideSelect=1,CurrentSelect,year,month,day;function Scroll(str,key)'+
  33. '{var Html="",s,e,obj,d;'+
  34. 'if(key=="Y"){s=sy;e=ey;obj="SelectYearItem";d="年";}if(key=="M"){s=sm;e=em;obj="SelectMonthItem";d="";}'+
  35. 'if(str=="Up"){s--;e--;}if(str=="Next"){s++;e++;}'+
  36. 'if(key=="Y"){sy=s;ey=e;}if(key=="M"){if(s<1)s=1;if(s>6)s=6;if(e<7)e=7;if(e>12)e=12;sm=s;em=e;}'+
  37. 'for(i=s;i<=e;i++){Html+=\'<a href="javascript:;" onclick="parent.Calendar_Modif(\';Html+=(key=="M")?year+\',\'+i+\',\'+day+\');">\'+parent.MonthText[i]:i+\',\'+month+\',\'+day+\');">\'+i;Html+=d+"</a>";}'+
  38. 'document.getElementById(obj).innerHTML=Html;}'+
  39. 'function KeyDown(str){if(str==38){Scroll("Up",CurrentSelect);}if(str==40){Scroll("Next",CurrentSelect);}}'+
  40. 'function ShowSelect(str,str2){HideSelect=0;HSelect();Scroll(\'\',str2);document.getElementById(str).style.display="block";CurrentSelect=str2}'+
  41. 'function HSelect(){document.getElementById("SelectYear").style.display="none";document.getElementById("SelectMonth").style.display="none";}'+
  42. 'function Calendar_GetDate(y,m,d)'+
  43. '{var objEvent=window.event||arguments.callee.caller.arguments[0];'+
  44. 'var srcElement=objEvent.srcElement;'+
  45. 'if(!srcElement){srcElement=objEvent.target;}'+
  46. 'if(srcElement.tagName=="A"){parent.Calendar_GetDate(y,m,srcElement.innerHTML);}}'+
  47. 'document.onclick=function(){if(HideSelect){HSelect();}HideSelect=1;}</scr'+
  48. 'ipt><body onkeydown="KeyDown(event.keyCode);">'+
  49. '<div id="SelectYear" style="left:31px;" onclick="ShowSelect(\'SelectYear\',\'Y\');"><div id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Up\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid #5563B0;"><font face="Webdings">5</font></a><div id="SelectYearItem">'+
  50. '</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Next\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid #5563B0;"><font face="Webdings">6</font></a></div></div>'+
  51. '<div id="SelectMonth" style="left:99px;" onclick="ShowSelect(\'SelectMonth\',\'M\');"><div id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Up\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid #5563B0;"><font face="Webdings">5</font></a><div id="SelectMonthItem">'+
  52. '</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Next\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid #5563B0;"><font face="Webdings">6</font></a></div></div>';
  53. function Calendar_Show(year,month,day)
  54. {
  55. var content;
  56. var date=new Date();
  57. var DayNum=(IsLeapYear(year) && month==2)?MonthDNum[month]+1:MonthDNum[month];
  58. var date2=new Date(year,month-1,1)
  59. var start=date2.getDay();
  60. var date2=null;
  61. var Trn=Math.ceil((DayNum+start)/7);
  62. var PrNum=1;
  63. content='<scr'+
  64. 'ipt language="JavaScript">year='+year+',month='+month+',day='+day+',sy=year-3;ey=year+3;'+
  65. 'sm=(month-3<1)?1:(+month-3>6)?6:month-3;'+
  66. 'em=(month+3<7)?7:(month+3>12)?12:month+3;</scr'+
  67. 'ipt><div style="border:1px solid #6A84C8;height:'+(64+21*Trn)+'px;"><ul><li style="background:#FFF;"></li>'+
  68. '<li style="width:144px;background:#FFF;padding-bottom:1px;" id="SelectArea"><div id="sYear" onclick="ShowSelect(\'SelectYear\',\'Y\');">'+year+'年</div><div id="SArr" onclick="ShowSelect(\'SelectYear\',\'Y\');"><font face="Webdings">6</font></div>'+
  69. '<div id="sMonth" onclick="ShowSelect(\'SelectMonth\',\'M\');">'+MonthText[month]+'</div><div id="SArr" onclick="ShowSelect(\'SelectMonth\',\'M\');"><font face="Webdings">6</font></div>';
  70. content+='</li>'+
  71. '<li><a href="javascript:parent.Calendar_hide();">×</a></li></ul>'+
  72. '<div id="Tools"><ul>'+
  73. '<li><a href="javascript:parent.Calendar_Modif('+(year-1)+','+month+','+day+');">«</a></li>'+
  74. '<li><a href="javascript:parent.Calendar_Modif('+year+','+(month-1)+','+day+')";>‹</a></li>';
  75. if(Calendar_obj2){content+='<li style="width:42px;"><a href="javascript:parent.Calendar_GetDate('+year+','+month+',0);">本月</a></li>'+
  76. '<li style="width:43px;"><a href="javascript:parent.Calendar_GetDate('+date.getFullYear()+','+(date.getMonth()+1)+','+date.getDate()+');">本日</a></li>';}
  77. else{content+='<li style="width:86px;"><a href="javascript:parent.Calendar_GetDate('+date.getFullYear()+','+(date.getMonth()+1)+','+date.getDate()+');">选择本日</a></li>';}
  78. content+='<li><a href="javascript:parent.Calendar_Modif('+year+','+(month+1)+','+day+');">›</a></li>'+
  79. '<li><a href="javascript:parent.Calendar_Modif('+(year+1)+','+month+','+day+');">»</a></li>'+
  80. '</ul></div>'+
  81. '<div id="Title"><ul><li style="color:#F00;">日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li style="color:#F00;">六</li></ul></div>'+
  82. '<ul onClick="javascript:Calendar_GetDate('+year+','+month+',-1);">';
  83. var date=null;
  84. if(start>0){content+='<li style="width:'+(start*29-1)+'px;"></li>';}
  85. for(i=1;i<=DayNum;i++)
  86. {
  87. content+='<li><a href="#"'
  88. content+=(day==PrNum)?' class="CurrentDate"':'';
  89. content+=((i+start)%7<2)?' style="color:#F00;"':'';
  90. content+='>'+PrNum+'</a></li>';
  91. PrNum++;
  92. }
  93. content+='</ul></div>';
  94. //层定位
  95. var Calendar=document.getElementById('divCalendar');
  96. Calendar.style.height=66+21*Trn+'px'; //框架高度
  97. divCalendar.document.open()
  98. divCalendar.document.write(HeadMsg+content);
  99. divCalendar.document.close()
  100. var p=Calendar_obj;
  101. var eT=0,eL=0,eH=0,dH=0,sT=0,eP=p
  102. while(p && p.tagName!="BODY"){
  103. eT+=p.offsetTop; //距窗口顶部距离
  104. eL+=p.offsetLeft; //距窗口左边距离
  105. p=p.offsetParent;}
  106. var eH=eP.offsetHeight; //输入框高度
  107. var eW=eP.offsetWidth; //输入框宽度
  108. var dH=Calendar.style.pixelHeight; //框架高度
  109. Calendar.style.top=(eT+dH>document.body.scrollHeight && eT-dH>=0)?eT-dH+'px':eT+eH+'px';
  110. Calendar.style.left=(eL+206>document.body.scrollWidth && eL-206+eW>=0)?eL-206+eW+'px':eL+'px';
  111. setTimeout("document.getElementById('divCalendar').style.display=''",1);
  112. }
  113. /*是否润年*/
  114. function IsLeapYear(y){
  115. if(0==y%4 && ((y%100!=0)||(y%400==0))){return true;}
  116. else{return false;}
  117. }
  118. function Calendar_Modif(y,m,d)
  119. {
  120. if(m<1){m=12;y=y-1;}
  121. if(m>12){m=1;y=y+1;}
  122. var num=(IsLeapYear(y) && m==2)?MonthDNum[m]+1:MonthDNum[m];
  123. if(d>num){d=num;}
  124. Calendar_Show(y,m,d)
  125. }
  126. function Calendar(obj,obj2)
  127. {
  128. var p=Calendar_obj=document.getElementById(obj);
  129. Calendar_obj2=document.getElementById(obj2);
  130. var re=/\d{4}-\d{1,2}-\d{1,2}/;
  131. var arr,Sdate;
  132. arr=re.exec(Calendar_obj.value);
  133. if(arr!=null){Sdate=Calendar_obj.value;}
  134. else{var mydate=new Date();
  135. Sdate=mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();}
  136. Sdate=Sdate.split("-");
  137. Calendar_Show(parseInt(Sdate[0]),parseInt(Sdate[1]),parseInt(Sdate[2]));
  138. }
  139. function Calendar_GetDate(y,m,d)
  140. {
  141. if(!Calendar_obj2||d!=0){
  142. if(d>0){Calendar_obj.value=y+'-'+m+'-'+d;}
  143. else{
  144. var objEvent=divCalendar.event||arguments.callee.caller.arguments[0];
  145. var srcElement=objEvent.srcElement;
  146. if(!srcElement){srcElement=objEvent.target;}
  147. Calendar_obj.value=y+'-'+m+'-'+srcElement.innerHTML;
  148. }
  149. }
  150. else{
  151. if(IsLeapYear(y) && m==2){num=MonthDNum[m]+1;}
  152. else{num=MonthDNum[m];}
  153. Calendar_obj.value=y+'-'+m+'-1';
  154. Calendar_obj2.value=y+'-'+m+'-'+num;
  155. }
  156. Calendar_hide();}
  157. function Calendar_hide()
  158. {document.getElementById("divCalendar").style.display="none";}
  159. document.onclick=Calendar_hide;