跨Frame的日历控件,在meizz3.0版基础上用Popup改写

因为公司的单点登录框架的原因,需要在一个空间非常狭小的地方,放一个日历控件,网上搜了下,支持跨frame的日历控件非常少,而且很丑于是只好自己动手了,以前一直在用梅花雪的日历感觉十分好用,于是准备在梅花雪3.0日历控件基础上进行修改,经过两个晚上的奋战终于搞定了,不过丢失了快捷键,并且当select列表长度超过日历高后失效.汗一个,实在搞不定了就那样吧,把年份调的少些,刚好可以显示在日历高度范围内就好了.快捷键也搞不定了,希望有牛人能够帮助改进.

 

<!--
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> " );
var  syjPopup  =  window.createPopup();
syjPopup.document.createStyleSheet( ' syj.css ' );
function  writeIframe()
{
     var  strIframe  =   " <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(this.syjPopup.document.body.style.left=='')this.syjPopup.document.body.style.left=0; if(this.syjPopup.document.body.style.top=='')this.syjPopup.document.body.style.top=0; " +
     " this.syjPopup.document.body.style.left = parseInt(this.syjPopup.document.body.style.left) + window.event.clientX-cx; " +
     " this.syjPopup.document.body.style.top  = parseInt(this.syjPopup.document.body.style.top)  + window.event.clientY-cy;}} " +
     " function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr " + " ipt> " }

    strIframe  += " <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 月' style='cursor: hand' onclick='parent.prevM()'><b>&lt;</b></td> " +
     "     <td width=60 id=meizzYearHead 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' style='cursor: hand'></td> " +
     "     <td width=40 id=meizzYearMonth 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' style='cursor: hand'></td> " +
     "     <td width=15 class=bg title='向后翻 1 月' 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 ><div class=divButton style='width: 100%;height: 100%;border: 0;padding-top: 4px;font-weight: normal;' onfocus='this.blur()' onclick='parent.hiddenCalendar()'>关闭</div></td></tr></table> " +
     " </td></tr><tr><td height=20 width=140 bgcolor=' " +  WebCalendar.lightColor  + " '> " +
         " <div name=prevYear class=divButton title='向前翻 1 年' onclick='parent.prevY()' onfocus='this.blur()' style='width: 20px;border-right: none;meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000);'>&lt;&lt;</div> " +
         " <div name=prevMonth class=divButton title='向前翻 1 月'  onclick='parent.prevM()' onfocus='this.blur()' style='width: 17px;'>&lt;</div> " +
         " <div name=today class=divButton title='当前日期' onclick="parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())" onfocus='this.blur()' style='width: 50;margin-left: 8px;margin-right: 8px;'>今天</div> " +
         " <div name=nextMonth class=divButton title='向后翻 1 月' onclick='parent.nextM()' onfocus='this.blur()' style='width: 17px;'>&gt;</div> " +
         " <div name=nextYear class=divButton title='向后翻 1 年' onclick='parent.nextY()' onfocus='this.blur()' style='width: 20px;border-left: none;meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999);'>&gt;&gt;</div> " +
     " </td></tr><table></form> " ;

     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;
        }
    }
     var  sbody  =   this .syjPopup.document.body;
    sbody.style.overflow   =   " hidden " ;
     this .syjPopup.document.body.innerHTML  =  strIframe;
     with (syjPopup.document.body.all)
    {
         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  WebCalendar()  // 初始化日历的设置
{
     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    =   5 ;            // 定义年下拉框的年差值
     this .format      =   " yyyy-mm-dd " ;  // 回传日期的格式
     this .timeShow    =   false ;         // 是否返回时间
     this .drag        =   false ;          // 是否允许拖动
     this .darkColor   =   " #6BBFD9 " ;     // 控件的暗色
     this .lightColor  =   " #FFFFFF " ;     // 控件的亮色
     this .btnBgColor  =   " #FFFFF5 " ;     // 控件的按钮背景色
     this .wordColor   =   " #000080 " ;     // 控件的文字颜色
     this .wordDark    =   " #DCDCDC " ;     // 控件的暗文字颜色
     this .dayBgColor  =   " #DEEAF6 " ;     // 日期数字背景色
     this .todayColor  =   " red " ;     // 今天在日历上的标示背景色
     this .DarkBorder  =   " #D4D0C8 " ;     // 日期显示的立体表达色
}
var  WebCalendar  =   new  WebCalendar();

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;}
     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  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;

    syjPopup.show(event.screenX + 0 , event.screenY + 0 ,  146 ,  192 , e);

     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  funYearSelect()  // 年份的下拉框
{
     var  n  =  WebCalendar.yearFall;
     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;
     var  tmpYear = this .syjPopup.document.body.all.tmpYearSelect;
     if (tmpYear != ' undefined ' && tmpYear != null ) return  ;
     var  selYearHTML = " <select id=tmpYearSelect onchange='parent.WebCalendar.thisYear =this.value; parent.writeCalendar();'> " ;
     for  ( var  i = min; i <= max; i ++ ){
         var  tempSelected = WebCalendar.thisYear == i ? ' selected ' : '' ;
        selYearHTML  += " <option value=' " + i + " ' " + tempSelected + " > " + i + " 年</option> " ;
    }    
    selYearHTML += " </select> " ;
     this .syjPopup.document.body.all.meizzYearHead.innerHTML = selYearHTML;
}
function  funMonthSelect()  // 月份的下拉框
{
     var  tmpMonth = this .syjPopup.document.body.all.tmpMonthSelect;
     if (tmpMonth != ' undefined ' && tmpMonth != null ) return  ;
     var  selMonthHTML = " <select id=tmpMonthSelect onchange='parent.WebCalendar.thisMonth=this.value; parent.writeCalendar();'> " ;
     for  ( var  i = 1 ; i < 13 ; i ++ ){
             var  tempSelected = WebCalendar.thisMonth == i ? ' selected ' : '' ;
            selMonthHTML  += " <option value=' " + i + " ' " + tempSelected + " > " + i + " 月</option> " ;
    }
    selMonthHTML += " </select> " ;
     this .syjPopup.document.body.all.meizzYearMonth.innerHTML = selMonthHTML;
}
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(){ this .syjPopup.hide();}
function  appendZero(n){ return (( " 00 " +  n).substr(( " 00 " +  n).length - 2 ));} // 日期自动补零程序
String.prototype.trim  =   function (){ 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;
     this .syjPopup.document.body.all.meizzYearHead.innerText   =  y  + "  年 " ;
     this .syjPopup.document.body.all.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.wordColor;}
         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();
    }
}
document.onclick = function ()
{
     if (WebCalendar.eventSrc  !=  window.event.srcElement){hiddenCalendar();}
}


// -->

另外需要一个css文件syj.css

 

*  {
    font-size :  12px ;
    font-family :  宋体
}
.bg  {
    color :  "#FFFFFF" ; /* lightColor */
    cursor :  default ;
    background-color :  "#64A9E8" ; /* darkColor */
}
table#tableMain  {
    width :  142 ;
    height :  180 ;
}

table#tableWeek td  {
    color :  "#FFFFFF" ; /* lightColor */
}
table#tableDay  td  {
    font-weight :  bold ;
}
select#tmpYearSelect,select#tmpMonthSelect  {
    color :  "#000080" ; /* wordColor */
}
.out  {
    text-align :  center ;
    border-top :  1px solid "#D4D0C8" ; /* DarkBorder */
    border-left :  1px solid "#D4D0C8" ; /* DarkBorder */
    border-right :  1px solid "#FFFFFF" ; /* lightColor */
    border-bottom :  1px solid "#FFFFFF" ; /* lightColor */
}
.over  {
    text-align :  center ;
    border-top :  1px solid #FFFFFF ;
    border-left :  1px solid #FFFFFF ;
    border-bottom :  1px solid "#D4D0C8" ; /* DarkBorder */
    border-right :  1px solid "#D4D0C8" ; /* DarkBorder */
}
input  {
    border :  1px solid "#6BBFD9" ; /* darkColor */
    padding-top :  1px ;
    height :  18 ;
    cursor :  hand ;
    color :  "#000080" ; /* wordColor */
    background-color :  "#FFFFF5" ; /* btnBgColor */
}
td#meizzYearHead, td#meizzYearMonth
{
    color :  #000080 ;
}
.divButton {
    text-align :  center ;
    border :  1px solid "#6BBFD9" ; /* darkColor */
    display :  inline ;
    padding-top :  1px ;
    height :  18 ;
    cursor :  hand ;
    color :  "#000080" ; /* wordColor */
    background-color :  "#FFFFF5" ; /* btnBgColor */
}

使用方法

< html >
   < head >
     < title ></ title >
   </ head >
< body >
   < script  language ="JavaScript"  src ="calendar.js" ></ script >
   < input  name ="syj"   >< input  type =button  value ="跨frame的日历"  onclick ="calendar(document.getElementById('syj'))" >
</ body >
</ html >

放到frame里面看看效果

 

< head >
< title ></ title >
</ head >
< frameset  rows ="50,*" >
   < frame  src ="demo.htm" >
   < frame  src ="http://www.baidu.com" >
</ frameset >
</ html >

也可以去我发布的 资源 去下载rar文件