一个适用于visual studio 2005的一个js日历控件--zhuan

最近要用到日历控件刚开始是使用梅花雨3.0不过发现了一些弹出的快慢还有定位的问题.总是有点麻烦.另外我是处于一个隐藏层内所以会有很多问题. 这个时候研究了下discuznt.net看到他们投票里面有一个很好的JS控件,内容如下

文件名为:calendar.js

 

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();

那么我再default.aspx里面要引用这个怎么使用呢.

下面就是default.aspx的前台代码

首先再<head></head>标签内部填入以下(当然这个路径你要注意哦,我是放在一个目录下的)

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

 看到这个calendar.js里面有句function showcalendar(event, controlid1, startdate1, enddate1, defday)

其中controlid1表示要使用这个日历的空间的ID,startdate1,enddate1,表示指示开始以及指定时间的范围的空间的ID.defday

 

这样我再default.aspx里面放上三个input,两个是runat server,因为我需要取得还有生成开始值

记得后两个input 为hidden.

  < 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 "   />

 

那么我在default.aspx.cs里面生成初始值也就是当前的值

 

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

 

ok  run一下,发现在当前值之前的日期始灰色不可选取的.哈哈.就这样了.我喜欢这个效果,特别始放在投票里面

http://blog.csdn.net/xiong1000/archive/2006/08/18/1090595.aspx