更新更强的日历脚本(downmoon)

第一步:将如下内容存为Calendar.js

 document.write( " <div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'> " );
 document.write(
 " <iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div> " );
 
function  writeIframe()
 
{
     
 var  strIframe  =   " <html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style> " + 
     
 " *{font-size: 12px; font-family: 宋体} " + 
     
 " .bg{  color:  " +  WebCalendar.lightColor  + " ; cursor: default; background-color:  " +  WebCalendar.darkColor  + " ;} " + 
     
 " table#tableMain{ width: 142; height: 180;} " + 
     
 " table#tableWeek td{ color:  " +  WebCalendar.lightColor  + " ;} " + 
     
 " table#tableDay  td{ font-weight: bold;} " + 
     
 " td#meizzYearHead, td#meizzYearMonth{color:  " +  WebCalendar.wordColor  + " } " + 
     
 " .out { text-align: center; border-top: 1px solid  " +  WebCalendar.DarkBorder  + " ; border-left: 1px solid  " +  WebCalendar.DarkBorder  + " ; " + 
     
 " border-right: 1px solid  " +  WebCalendar.lightColor  + " ; border-bottom: 1px solid  " +  WebCalendar.lightColor  + " ;} " + 
     
 " .over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; " + 
     
 " border-bottom: 1px solid  " +  WebCalendar.DarkBorder  + " ; border-right: 1px solid  " +  WebCalendar.DarkBorder  + " } " + 
     
 " input{ border: 1px solid  " +  WebCalendar.darkColor  + " ; padding-top: 1px; height: 18; cursor: hand; " + 
     
 "        color: " +  WebCalendar.wordColor  + " ; background-color:  " +  WebCalendar.btnBgColor  + " } " + 
     
 " </style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz> " ;
 
     
 if  (WebCalendar.drag) { strIframe  +=   " <scr " + " ipt language=javascript> " + 
     
 " var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){ " + 
     
 " if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0; " + 
     
 " o.style.left = parseInt(o.style.left) + window.event.clientX-cx; " + 
     
 " o.style.top  = parseInt(o.style.top)  + window.event.clientY-cy;}} " + 
     
 " function document.onkeydown(){ switch(window.event.keyCode){  case 27 : parent.hiddenCalendar(); break; " + 
     
 " case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break; " + 
     
 " case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;} " + 
     
 " function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr " + " ipt> " } 

 
     strIframe 
 +=   " <select name=tmpYearSelect  onblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:18;display:none' " + 
     
 "  onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select> " + 
     
 " <select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:74;display:none' " + 
     
 "  onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select> " + 
 
     
 " <table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0> " + 
     
 " <tr><td width=140 height=19 bgcolor=' " +  WebCalendar.lightColor  + " '> " + 
     
 "     <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center> " + 
     
 "     <td width=15 height=19 class=bg title='向前翻 1 月&#13;快捷键:←' style='cursor: hand' onclick='parent.prevM()'><b>&lt;</b></td> " + 
     
 "     <td width=60 id=meizzYearHead  title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText, 10))' " + 
     
 "         onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor' " + 
     
 "         onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td> " + 
     
 "     <td width=50 id=meizzYearMonth title='点击此处选择月份' onclick='parent.funMonthSelect(parseInt(this.innerText, 10))' " + 
     
 "         onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor' " + 
     
 "         onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td> " + 
     
 "     <td width=15 class=bg title='向后翻 1 月&#13;快捷键:→' onclick='parent.nextM()' style='cursor: hand'><b>&gt;</b></td></tr></table> " + 
     
 " </td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0  " ;
     
 if (WebCalendar.drag) {strIframe  +=   " onmousedown='dragStart()' onmouseup='drag=false' onmouseout='drag=false' " ;} 
     strIframe 
 +=   "  borderColorLight=' " +  WebCalendar.darkColor  + " ' borderColorDark=' " +  WebCalendar.lightColor  + " '> " + 
     
 "     <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table> " + 
     
 " </td></tr><tr><td valign=top width=140 bgcolor=' " +  WebCalendar.lightColor  + " '> " + 
     
 "     <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0> " ;
          
 for ( var  x = 0 ; x < 5 ; x ++ ) { strIframe  +=   " <tr> " ;
          
 for ( var  y = 0 ; y < 7 ; y ++ )  strIframe  +=   " <td class=out id='meizzDay " +  (x * 7 + y)  + " '></td> " ; strIframe  +=   " </tr> " ;} 

          strIframe 
 +=   " <tr> " ;
          
 for ( var  x = 35 ; x < 39 ; x ++ ) strIframe  +=   " <td class=out id='meizzDay " +  x  + " '></td> " ;
          strIframe 
 += " <td colspan=3 class=out title=' " +  WebCalendar.regInfo  + " '><input style=' background-color:  " + 
          WebCalendar.btnBgColor 
 + " ;cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' onfocus='this.blur()' " + 
          
 "  type=button value='&nbsp; &nbsp; 关闭' onclick='parent.hiddenCalendar()'></td></tr></table> " + 
     
 " </td></tr><tr><td height=20 width=140 bgcolor=' " +  WebCalendar.lightColor  + " '> " + 
     
 "     <table border=0 cellpadding=1 cellspacing=0 width=140> " + 
     
 "     <tr><td><input name=prevYear title='向前翻 1 年&#13;快捷键:↑' onclick='parent.prevY()' type=button value='&lt;&lt;' " + 
     
 "     onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input " + 
     
 "     onfocus='this.blur()' name=prevMonth title='向前翻 1 月&#13;快捷键:←' onclick='parent.prevM()' type=button value='&lt;&nbsp;'> " + 
     
 "     </td><td align=center><input name=today type=button value='今天' onfocus='this.blur()' style='width: 50' title='当前日期&#13;快捷键:T' " + 
     
 "     onclick="parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())"> " + 
     
 "     </td><td align=right><input title='向后翻 1 月&#13;快捷键:→' name=nextMonth onclick='parent.nextM()' type=button value='&nbsp;&gt;' " + 
     
 "     onfocus='this.blur()'><input name=nextYear title='向后翻 1 年&#13;快捷键:↓' onclick='parent.nextY()' type=button value='&gt;&gt;' " + 
     
 "     onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table> " + 
     
 " </td></tr><table></form></body></html> " ;
     
 with (WebCalendar.iframe)
     
 {
         document.writeln(strIframe); document.close();
         
 for ( var  i = 0 ; i < 39 ; i ++ )
         
 {
             WebCalendar.dayObj[i] 
 =  eval( " meizzDay " +  i);
             WebCalendar.dayObj[i].onmouseover 
 =  dayMouseOver;
             WebCalendar.dayObj[i].onmouseout  
 =  dayMouseOut;
             WebCalendar.dayObj[i].onclick     
 =  returnDate;
         }
 

     }
 

 }
 

 
function  TWebCalendar()  // 初始化日历的设置 
 
{
     
 this .regInfo     =   " 点击关闭按钮关闭日期选择器! " ;
    
 //  this.regInfo    = "WEB Calendar 3.0&#13;作者:meizz(梅花雪疏影横斜)&#13;网站:http://www.meizz.com/&#13;关闭的快捷键:[Esc]"; 
 
    //  this.regInfo   += "&#13;&#13;Ver 2.0:walkingpoison(水晶龙)&#13;Ver 1.0:meizz(梅花雪疏影横斜)"; 
 
     this .daysMonth   =   new  Array( 31  28  31  30  31  30  31  31  30  31  30  31 );
     
 this .day         =   new  Array( 39 );             // 定义日历展示用的数组 
 
     this .dayObj      =   new  Array( 39 );             // 定义日期展示控件数组 
 
     this .dateStyle   =   null ;                      // 保存格式化后日期数组 
 
     this .objExport   =   null ;                      // 日历回传的显示控件 
 
     this .eventSrc    =   null ;                      // 日历显示的触发控件 
 
     this .inputDate   =   null ;                      // 转化外的输入的日期(d/m/yyyy) 
 
     this .thisYear    =   new  Date().getFullYear();  // 定义年的变量的初始值 
 
     this .thisMonth   =   new  Date().getMonth() +   1  // 定义月的变量的初始值 
 
     this .thisDay     =   new  Date().getDate();      // 定义日的变量的初始值 
 
     this .today       =   this .thisDay  + " / " +   this .thisMonth  + " / " +   this .thisYear;    // 今天(d/m/yyyy) 
 
     this .iframe      =  window.frames( " meizzCalendarIframe " );  // 日历的 iframe 载体 
 
     this .calendar    =  getObjectById( " meizzCalendarLayer " );   // 日历的层 
 
     this .dateReg     =   "" ;            // 日历格式验证的正则式 
 

     
 this .yearFall    =   50 ;            // 定义年下拉框的年差值 
 
     this .format      =   " yyyy-mm-dd "  // 回传日期的格式 
 
     this .timeShow    =   false ;         // 是否返回时间 
 
     this .drag        =   true ;          // 是否允许拖动 
 
     this .darkColor   =   " #6BBFD9 " ;     // 控件的暗色 
 
     this .lightColor  =   " #FFFFFF " ;     // 控件的亮色 
 
     this .btnBgColor  =   " #FFFFF5 " ;     // 控件的按钮背景色 
 
     this .wordColor   =   " #000080 " ;     // 控件的文字颜色 
 
     this .wordDark    =   " #DCDCDC " ;     // 控件的暗文字颜色 
 
     this .dayBgColor  =   " #DEEAF6 " ;     // 日期数字背景色 
 
     this .todayColor  =   " #FF0000 " ;     // 今天在日历上的标示背景色 
 
     this .DarkBorder  =   " #D4D0C8 " ;     // 日期显示的立体表达色 
 
} 
    var  WebCalendar  =   new  TWebCalendar();
 
 
function  calendar()  // 主调函数 
 
{
     
 var  e  =  window.event.srcElement;   writeIframe();
     
 var  o  =  WebCalendar.calendar.style; WebCalendar.eventSrc  =  e;
     
 if  (arguments.length  ==   0 ) WebCalendar.objExport  =  e;
     
 else  WebCalendar.objExport  =  eval(arguments[ 0 ]);
 
     WebCalendar.iframe.tableWeek.style.cursor 
 =  WebCalendar.drag  ?   " move "  :  " default " ;
     
 var  t  =  e.offsetTop,  h  =  e.clientHeight, l  =  e.offsetLeft, p  =  e.type;
     
 while  (e  =  e.offsetParent) {t  +=  e.offsetTop; l  +=  e.offsetLeft;} 
     o.display 
 =   "" ; WebCalendar.iframe.document.body.focus();
     
 var  cw  =  WebCalendar.calendar.clientWidth, ch  =  WebCalendar.calendar.clientHeight;
     
 var  dw  =  document.body.clientWidth, dl  =  document.body.scrollLeft, dt  =  document.body.scrollTop;
     
     
 if  (document.body.clientHeight  +  dt  -  t  -  h  >=  ch) o.top  =  (p == " image " ) ?  t  +  h : t  +  h  +   6 ;
     
 else  o.top   =  (t  -  dt  <  ch)  ?  ((p == " image " ) ?  t  +  h : t  +  h  +   6 ) : t  -  ch;
     
 if  (dw  +  dl  -  l  >=  cw) o.left  =  l;  else  o.left  =  (dw  >=  cw)  ?  dw  -  cw  +  dl : dl;
 
     
 if   ( ! WebCalendar.timeShow) WebCalendar.dateReg  =   /^ (d { 1 , 4 } )( -| /| .)(d { 1 , 2 } ) 2 (d { 1 , 2 } )$ / ;
     
 else  WebCalendar.dateReg  =   /^ (d { 1 , 4 } )( -| /| .)(d { 1 , 2 } ) 2 (d { 1 , 2 } ) (d { 1 , 2 } ):(d { 1 , 2 } ):(d { 1 , 2 } )$ / ;
 
     
 try {
         
 if  (WebCalendar.objExport.value.trim()  !=   "" ) {
             WebCalendar.dateStyle 
 =  WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
             
 if  (WebCalendar.dateStyle  ==   null )
             
 {
                 WebCalendar.thisYear   
 =   new  Date().getFullYear();
                 WebCalendar.thisMonth  
 =   new  Date().getMonth() +   1 ;
                 WebCalendar.thisDay    
 =   new  Date().getDate();
                 alert(
 " 原文本框里的日期有错误! 可能与你定义的显示时分秒有冲突! " );
                 writeCalendar(); 
 return   false ;
             }
 

             
 else 
             
 {
                 WebCalendar.thisYear   
 =  parseInt(WebCalendar.dateStyle[ 1 ],  10 );
                 WebCalendar.thisMonth  
 =  parseInt(WebCalendar.dateStyle[ 3 ],  10 );
                 WebCalendar.thisDay    
 =  parseInt(WebCalendar.dateStyle[ 4 ],  10 );
                 WebCalendar.inputDate  
 =  parseInt(WebCalendar.thisDay,  10  + " / " +  parseInt(WebCalendar.thisMonth,  10  + " / " +  
                 parseInt(WebCalendar.thisYear, 
 10 ); writeCalendar();
             }
 

         }
 
   else  writeCalendar();
     }
 
   catch (e) {writeCalendar();} 
 }
 

 
function  funMonthSelect()  // 月份的下拉框 
 
{
     
 var  m  =  isNaN(parseInt(WebCalendar.thisMonth,  10 ))  ?   new  Date().getMonth()  +   1  : parseInt(WebCalendar.thisMonth);
     
 var  e  =  WebCalendar.iframe.document.forms[ 0 ].tmpMonthSelect;
     
 for  ( var  i = 1 ; i < 13 ; i ++ ) e.options.add( new  Option(i  + "  " , i));
     e.style.display 
 =   "" ; e.value  =  m; e.focus(); window.status  =  e.style.top;
 }
 

 
function  funYearSelect()  // 年份的下拉框 
 
{
     
 var  n  =  WebCalendar.yearFall;
     
 var  e  =  WebCalendar.iframe.document.forms[ 0 ].tmpYearSelect;
     
 var  y  =  isNaN(parseInt(WebCalendar.thisYear,  10 ))  ?   new  Date().getFullYear() : parseInt(WebCalendar.thisYear);
         y 
 =  (y  <=   1000 ) ?   1000  : ((y  >=   9999 ) ?   9999  : y);
     
 var  min  =  (y  -  n  >=   1000  ?  y  -  n :  1000 ;
     
 var  max  =  (y  +  n  <=   9999  ?  y  +  n :  9999 ;
         min 
 =  (max  ==   9999  ?  max - n * 2  : min;
         max 
 =  (min  ==   1000  ?  min + n * 2  : max;
     
 for  ( var  i = min; i <= max; i ++ )
     
 {
       
 // alert(e.options.length); 
 
      e.options[e.options.length]  =   new  Option(i  + "  " , i + ""  true  true ); // e.options.add(new Option(i +"年", i)); 
 
    } 

     e.style.display 
 =   "" ;
     e.value 
 =  y; e.focus();
 }
 

 
function  prevM()   // 往前翻月份 
 
{
     WebCalendar.thisDay 
 =   1 ;
     
 if  (WebCalendar.thisMonth == 1 )
     
 {
         WebCalendar.thisYear
 -- ;
         WebCalendar.thisMonth
 = 13 ;
     }
 

     WebCalendar.thisMonth
 -- ; writeCalendar();
 }
 

 
function  nextM()   // 往后翻月份 
 
{
     WebCalendar.thisDay 
 =   1 ;
     
 if  (WebCalendar.thisMonth == 12 )
     
 {
         WebCalendar.thisYear
 ++ ;
         WebCalendar.thisMonth
 = 0 ;
     }
 

     WebCalendar.thisMonth
 ++ ; writeCalendar();
 }
 

 
function  prevY() {WebCalendar.thisDay  =   1 ; WebCalendar.thisYear -- ; writeCalendar();} // 往前翻 Year 
 
function  nextY() {WebCalendar.thisDay  =   1 ; WebCalendar.thisYear ++ ; writeCalendar();} // 往后翻 Year 
 
function  hiddenSelect(e) { for ( var  i = e.options.length; i >- 1 ; i -- )e.options.remove(i); e.style.display = " none " ;} 
 
function  getObjectById(id)  if (document.all)  return (eval( " document.all. " +  id));  return (eval(id)); } 
 
function  hiddenCalendar() {getObjectById( " meizzCalendarLayer " ).style.display  =   " none " ;} ;
 
function  appendZero(n) { return (( " 00 " +  n).substr(( " 00 " +  n).length - 2 ));} // 日期自动补零程序 
 
function  String.prototype.trim() { return   this .replace( / ( ^ s * ) | (s * $) / g, "" );} 
 
function  dayMouseOver()
 
{
     
 this .className  =   " over " ;
     
 this .style.backgroundColor  =  WebCalendar.darkColor;
     
 if (WebCalendar.day[ this .id.substr( 8 )].split( " / " )[ 1  ==  WebCalendar.thisMonth)
     
 this .style.color  =  WebCalendar.lightColor;
 }
 

 
function  dayMouseOut()
 
{
     
 this .className  =   " out "  var  d  =  WebCalendar.day[ this .id.substr( 8 )], a  =  d.split( " / " );
     
 this .style.removeAttribute( ' backgroundColor ' );
     
 if (a[ 1  ==  WebCalendar.thisMonth  &&  d  !=  WebCalendar.today)
     
 {
         
 if (WebCalendar.dateStyle  &&  a[ 0  ==  parseInt(WebCalendar.dateStyle[ 4 ],  10 ))
         
 this .style.color  =  WebCalendar.lightColor;
         
 this .style.color  =  WebCalendar.wordColor;
     }
 

 }
 

 
function  writeCalendar()  // 对日历显示的数据的处理程序 
 
{
     
 var  y  =  WebCalendar.thisYear;
     
 var  m  =  WebCalendar.thisMonth; 
     
 var  d  =  WebCalendar.thisDay;
     WebCalendar.daysMonth[
 1  =  ( 0 == y % 4   &&  (y % 100 != 0   ||  y % 400 == 0 ))  ?   29  :  28 ;
     
 if  ( ! (y <= 9999   &&  y  >=   1000   &&  parseInt(m,  10 ) > 0   &&  parseInt(m,  10 ) < 13   &&  parseInt(d,  10 ) > 0 )) {
         alert(
 " 对不起,你输入了错误的日期! " );
         WebCalendar.thisYear   
 =   new  Date().getFullYear();
         WebCalendar.thisMonth  
 =   new  Date().getMonth() +   1 ;
         WebCalendar.thisDay    
 =   new  Date().getDate(); } 

     y 
 =  WebCalendar.thisYear;
     m 
 =  WebCalendar.thisMonth;
     d 
 =  WebCalendar.thisDay;
     WebCalendar.iframe.meizzYearHead.innerText  
 =  y  + "  年 " ;
     WebCalendar.iframe.meizzYearMonth.innerText 
 =  parseInt(m,  10  + "  月 " ;
     WebCalendar.daysMonth[
 1  =  ( 0 == y % 4   &&  (y % 100 != 0   ||  y % 400 == 0 ))  ?   29  :  28  // 闰年二月为29天 
 
     var  w  =   new  Date(y, m - 1  1 ).getDay();
     
 var  prevDays  =  m == 1    ?  WebCalendar.daysMonth[ 11 ] : WebCalendar.daysMonth[m - 2 ];
     
 for ( var  i = (w - 1 ); i >= 0 ; i --  // 这三个 for 循环为日历赋数据源(数组 WebCalendar.day)格式是 d/m/yyyy 
 
     {
         WebCalendar.day[i] 
 =  prevDays  + " / " +  (parseInt(m,  10 ) - 1  + " / " +  y;
         
 if (m == 1 ) WebCalendar.day[i]  =  prevDays  + " / " +   12   + " / " +  (parseInt(y,  10 ) - 1 );
         prevDays
 -- ;
     }
 

     
 for ( var  i = 1 ; i <= WebCalendar.daysMonth[m - 1 ]; i ++ ) WebCalendar.day[i + w - 1  =  i  + " / " +  m  + " / " +  y;
     
 for ( var  i = 1 ; i < 39 - w - WebCalendar.daysMonth[m - 1 ] + 1 ; i ++ )
     
 {
         WebCalendar.day[WebCalendar.daysMonth[m
 - 1 ] + w - 1 + i]  =  i  + " / " +  (parseInt(m,  10 ) + 1  + " / " +  y;
         
 if (m == 12 ) WebCalendar.day[WebCalendar.daysMonth[m - 1 ] + w - 1 + i]  =  i  + " / " +   1   + " / " +  (parseInt(y,  10 ) + 1 );
     }
 

     
 for ( var  i = 0 ; i < 39 ; i ++ )     // 这个循环是根据源数组写到日历里显示 
 
     {
         
 var  a  =  WebCalendar.day[i].split( " / " );
         WebCalendar.dayObj[i].innerText    
 =  a[ 0 ];
         WebCalendar.dayObj[i].title        
 =  a[ 2  + " - " +  appendZero(a[ 1 ])  + " - " +  appendZero(a[ 0 ]);
         WebCalendar.dayObj[i].bgColor      
 =  WebCalendar.dayBgColor;
         WebCalendar.dayObj[i].style.color  
 =  WebCalendar.wordColor;
         
 if  ((i < 10   &&  parseInt(WebCalendar.day[i],  10 ) > 20  ||  (i > 27   &&  parseInt(WebCalendar.day[i],  10 ) < 12 ))
             WebCalendar.dayObj[i].style.color 
 =  WebCalendar.wordDark;
         
 if  (WebCalendar.inputDate == WebCalendar.day[i])     // 设置输入框里的日期在日历上的颜色 
 
         {WebCalendar.dayObj[i].bgColor  =  WebCalendar.darkColor; WebCalendar.dayObj[i].style.color  =  WebCalendar.lightColor;} 
         
 if  (WebCalendar.day[i]  ==  WebCalendar.today)       // 设置今天在日历上反应出来的颜色 
 
         {WebCalendar.dayObj[i].bgColor  =  WebCalendar.todayColor; WebCalendar.dayObj[i].style.color  =  WebCalendar.lightColor;} 
     }
 

 }
 

 
function  returnDate()  // 根据日期格式等返回用户选定的日期 
 
{
     
 if (WebCalendar.objExport)
     
 {
         
 var  returnValue;
         
 var  a  =  (arguments.length == 0  ?  WebCalendar.day[ this .id.substr( 8 )].split( " / " ) : arguments[ 0 ].split( " / " );
         
 var  d  =  WebCalendar.format.match( /^ (w { 4 } )( -| /| . | )(w { 1 , 2 } ) 2 (w { 1 , 2 } )$ / );
         
 if (d == null ) {alert( " 你设定的日期输出格式不对! 请重新定义 WebCalendar.format ! " );  return   false ;} 
         
 var  flag  =  d[ 3 ].length == 2   ||  d[ 4 ].length == 2  // 判断返回的日期格式是否要补零 
 
        returnValue  =  flag  ?  a[ 2  + d[ 2 ] +  appendZero(a[ 1 ])  + d[ 2 ] +  appendZero(a[ 0 ]) : a[ 2  + d[ 2 ] +  a[ 1  + d[ 2 ] +  a[ 0 ];
         
 if (WebCalendar.timeShow)
         
 {
             
 var  h  =   new  Date().getHours(), m  =   new  Date().getMinutes(), s  =   new  Date().getSeconds();
             returnValue 
 +=  flag  ?   "   " +  appendZero(h)  + " : " +  appendZero(m)  + " : " +  appendZero(s) :  "   " +   h   + " : " +  m  + " : " +  s;
         }
 

         WebCalendar.objExport.value 
 =  returnValue;
         hiddenCalendar();
     }
 

 }
 

 
function  document.onclick()
 
{
     
 if (WebCalendar.eventSrc  !=  window.event.srcElement) hiddenCalendar();
 }
 

第二步:新增一个页面TestCalendar.htm,内容如下:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > 
 
< html > 
     
 < head > 
         
 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" > 
         
 < title > 日期控件 </ title > 
         
 < style  type ="text/css" > .input1  {  BORDER-RIGHT :  #d4d4d4 1px solid ;  BORDER-TOP :  #d4d4d4 1px solid ;  FONT-SIZE :  12px ;  BORDER-LEFT:  #d4d4d4 1px solid ;  BORDER-BOTTOM :  #d4d4d4 1px solid ;  BACKGROUND-COLOR :  #ffffff  }  .input1  {  BORDER-RIGHT :  #666666 1px solid ;  BORDER-TOP :  #666666 1px solid ;  FONT-SIZE :  12px ;  BORDER-LEFT :  #666666 1px solid ;  BORDER-BOTTOM :  #666666 1px solid ;  BACKGROUND-COLOR :  #ffffff  }  .text1  {  FONT-SIZE :  12px ;  LINE-HEIGHT :  18px ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .style6  {  FONT-SIZE :  10px ;  LINE-HEIGHT :  18px ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .font00  {  FONT-SIZE :  12px  }  .font120  {  FONT-SIZE :  14px ;  LINE-HEIGHT :  23px ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .style7  {  FONT-WEIGHT :  bold ;  FONT-SIZE :  12px ;  COLOR :  #3c8acd ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .text11  {  FONT-SIZE :  14px ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .style22  {  COLOR :  #ff0000  }  .text12  {  FONT-SIZE :  12px ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }  .PromptMSG  {  FONT-SIZE :  12px ;  COLOR :  #ff0000 ;  FONT-FAMILY :  "Arial", "Helvetica", "sans-serif"  }   </ style > 
         
 < script  src ="JS/Calendar.js"  type ="text/javascript" ></ script > 
     
 </ head > 
     
 < body > 
         
 < table  ID ="Table1" > 
             
 < tr > 
                 
 < TD  class ="style7"  noWrap height ="30" > 生 日:  < INPUT  class ="input1"  id ="Birthday"  onfocus ="calendar()"  maxLength ="10"  name ="Birthday" > 
                     
 < FONT  color ="#ff0000" > * </ FONT >  (yyyy-MM-dd)
                     
 < DIV  class ="PromptMSG"  id ="divBirthday" ></ DIV > 
                 
 </ TD > 
             
 </ tr > 
         
 </ table > 
     
 </ body > 
 
</ html > 

posted @ 2010-09-03 12:39  cnblogs版主  Views(278)  Comments(0Edit  收藏  举报