KiMoGiGi 技术文集

var  is_ie  =  document.all  ?   true  :  false ;
var  is_ff  =  window.addEventListener  ?   true  :  false ;

// 得到控件的绝对位置
function  getposition(id)  ... {
    e  =  document.getElementById(id);
     var  t = e.offsetTop;
     var  l = e.offsetLeft;
     while (e = e.offsetParent)  ... {
        t += e.offsetTop;
        l += e.offsetLeft;
    }
     var  r  =   new  Array();
    r[ ' x ' ]  =  l;
    r[ ' y ' ]  =  t;
     return  r;
}

// debug
document.write( ' <div id="jsdebug"></div> ' );
function  d(e)  ... {
    s  =   '' ;
     for (k  in  e)  ... {
        t  =   typeof  e[k];
        s  +=  t + '  : <b> ' + k + '  :</b>  ' + e[k] + ' <br> ' ;
    }
    document.getElementById( ' jsdebug ' ).innerHTML  =  s;
}

/**/ /* ********************************************************************************************************************* */
var  controlid;                 // 控件 日历数值显示， 绝对位置定位
var  currdate      =   null ;             // 当前初始化时间    默认为本地时间
var  startdate      =   null ;          // 日期范围 - 开始日期
var  enddate      =   null ;          // 日期范围 - 截止日期
var  yy              =   null ;      // 年
var  mm              =   null ;         // 月
var  i;                     // 列
var  j;                     // 行
var  currday         =   null ;      // 今天
var  today          =   new  Date();      // 当前时间
today.setHours( 0 );
today.setMinutes( 0 );
today.setSeconds( 0 );
today.setMilliseconds( 0 );

//     pasedate('2005-1-2') 返回date对象
function  parsedate(s) ... {
     if (s  ==   '' ) ... {  return   false ;} ;
     var  reg = new  RegExp( " [^0-9-] " , "" )
     if (s.search(reg) >= 0 ) return  today;
     var  ss = s.split( " - " );
     if (ss.length != 3 ) return  today;
     if (isNaN(ss[ 0 ]) || isNaN(ss[ 1 ]) || isNaN(ss[ 2 ])) return  today;
     return   new  Date(parseFloat(ss[ 0 ]),parseFloat(ss[ 1 ]) - 1 ,parseFloat(ss[ 2 ]));
}

function  setdate(d) ... {
    document.getElementById( ' calendardiv ' ).style.display  =   ' none ' ;
    controlid.value  =  yy  +   " - "   +  (mm + 1 )  +   " - "   +  d;
}

function  myCancelBubble(event)  ... {
    e  =  event  ?  event : window.event ;
     if (is_ff)  ... {
        e.stopPropagation();
    }   else   if (is_ie)  ... {
        e.cancelBubble  =   true ;
    }
}

function  initcalendar() ... {
     // 当前时间
    s  =   ' <style> ' ;
    s  +=   ' #calendardiv{background-color:#FFFFCC;cursor:default} ' ;
    s  +=   ' #calendardiv a{color:#333333;text-decoration:none;} ' ;
    s  +=   ' #calendardiv table{border:1px solid #333333} ' ;
    s  +=   ' .expire, .expire a{color:#ccc;} ' ;
    s  +=   ' .default, .default a{color:#333333} ' ;
    s  +=   ' .checked, .checked a{font-weight:bold;} ' ;
    s  +=   ' .today{color:#ffcc00} ' ;
    s  +=   ' </style> ' ;
    s  +=   ' <div id="calendardiv" style="display:none;position:absolute;" onclick="myCancelBubble(event)"> ' ;
    s  +=   ' <table cellpadding="2" cellspacing="4"> ' ;
    s  +=   ' <tr><td colspan="7"><table width="100%" style="border:0px" align="center"><tr><td id="prev" align="center"><a href="javascript:drawcalendar(yy-1,mm);" title="上一年"><img src="../../images/page/first.gif" border="0" width="9" height="8" /></a>&nbsp; &nbsp<a href="javascript:drawcalendar(yy,mm-1);" title="上个月"><img src="../../images/page/prev.gif" border="0" width="8" height="8" /></a></td><td colspan="5" id="yyyymm" align="center"></td><td id="next" align="center"><a href="javascript:drawcalendar(yy,mm+1);" title="下个月"><img src="../../images/page/next.gif" border="0" width="8" height="8" /></a>&nbsp &nbsp;<a href="javascript:drawcalendar(yy+1,mm);" title="下一年"><img src="../../images/page/last.gif" border="0" width="9" height="8" /></a></td></tr></table></td></tr> ' ;
     // s += '<tr><td id="prev"> </td><td colspan="5" id="yyyymm" align="center"></td></tr>';
    s  +=   ' <tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr> ' ;
     for (i = 0 ; i  < 6 ; i ++ ) ... {
        s  +=   " <tr> " ;
         for (j = 1 ; j <= 7 ; j ++ )
            s  +=   " <td id=d " + (i * 7 + j) + "  height="19">0</td> " ;
        s  +=   " </tr> " ;
    }
    s  +=   ' </table> ' ;
    s  +=   ' </div> ' ;
    document.write(s);
    currday      =  currdate  ?  currdate : today; //  默认为本地时间
     // 点击隐藏
    document.onclick  =   function ()  ... {
        document.getElementById( ' calendardiv ' ).style.display  =   ' none ' ;
    }
}

function  showcalendar(event, controlid1, startdate1, enddate1, defday) ... {
     //  判断controlid position
    controlid    =  document.getElementById(controlid1);
    startdate    =  parsedate(document.getElementById(startdate1).value);
    enddate      =  parsedate(document.getElementById(enddate1).value);
    defday         =  parsedate(defday);

     var  p    =  getposition(controlid1);
    document.getElementById( ' calendardiv ' ).style.display  =   ' block ' ;
    document.getElementById( ' calendardiv ' ).style.left  =  p[ ' x ' ];
    document.getElementById( ' calendardiv ' ).style.top   =  p[ ' y ' ]  +   20 ;

    myCancelBubble(event);

    drawcalendar(defday.getFullYear(),defday.getMonth());
}

//  刷新日历
function  drawcalendar(y, m) ... {
     var  x   =   new  Date(y, m,  1 );
     var  mv  =  x.getDay();
     var  d  =  x.getDate();
     var  de  =   null ;                     //  单元格对象
    yy         =  x.getFullYear();
    mm         =  x.getMonth();
    document.getElementById( " yyyymm " ).innerHTML  =  yy  +   " . "   +  (mm + 1   >   9    ?  mm + 1  :  " 0 "   +  (mm + 1 ));
     // 将1号以前的单元设置为空
     for ( var  i = 1 ; i <= mv; i ++ ) ... {
        de  =  document.getElementById( " d " + i);
        de.innerHTML =   "" ;
        de.className =   "" ;
    }

     // 开始画当月日历
     while (x.getMonth()  ==  mm) ... {
        de  =  document.getElementById( " d " + (d + mv));
         if ((enddate  &&  x.getTime()  >  enddate.getTime())  ||  (startdate  &&  x.getTime()  <  startdate.getTime()))  ... {
            de.className  =   ' expire ' ;
            de.innerHTML  =  d;
        } else ... {
            de.className  =   ' default ' ;
            de.innerHTML  =   " <a href=javascript:setdate( " + d + " );> " + d + " </a> " ;
        }
         if (x.getTime()  ==  currday.getTime())  ... {
            de.className  =   ' checked ' ;
        }
         if (x.getTime()  ==  today.getTime())  ... {
            de.className  =   ' today ' ;
        }
        x.setDate( ++ d);
    }
     //  尾部空格
     while (d  +  mv  <=   42 ) ... {
        de  =  document.getElementById( " d " + (d + mv));
        de.innerHTML  =   "" ;
        de.bgColor  =   "" ;
        de.className  =   "" ;
        d ++ ;
    }
}

initcalendar();

     < script language = " javascript "  type = " text/javascript "  src = " calendar.js " ></ script >

  < asp:TextBox ID = " enddatetime "  runat = " server "  onClick = " showcalendar(event, 'enddatetime', 'cal_startdate', 'cal_enddate','cal_enddate') " ></ asp:TextBox >& nbsp;
< input type = " hidden "  name = " cal_startdate "  runat = " server "  id = " cal_startdate " />
< input type = " hidden "  name = " cal_enddate "  id = " cal_enddate "  runat = " server "   />

     protected   void  Page_Load( object  sender, EventArgs e)
     ... {
        cal_startdate.Value  =  DateTime.Now.Year.ToString()  +   " - "   +  DateTime.Now.Month.ToString()  +   " - "   +  DateTime.Now.Day.ToString();
    
    }