用javascript生成日历控件

根据CSDN作者：zhaoweiwei 的 javascript版的日期输入控件
原文: http://www.pconline.com.cn/pcedu/empolder/wz/javascript/0403/337191.html
但我想把它改写成.net 自定义控件，使用户操作起来更加方便，不用另外弹出一个页面即可完成操作，在aspx页面设计时只需方便地将此控件拖过来即行
一、首先修改ascx页，因为做成控件用时，必须要在调用每个javascript函数指定当前的控件的ClientID，要不然如果你的aspx页有多个你编写的这个自定义控件时，所有javascript方法只认识第一个自定义控件，方法如下

<% @ Control Language="C#" AutoEventWireup="true" CodeFile="InputDate.ascx.cs" Inherits="module_InputDate"  %>
   < div  id ="root"  runat  ="server"   style ="display:inline;"   >
< asp:TextBox  ID ="birthdate"  runat ="server" ></ asp:TextBox >< input  id ="popButton"  type ="button"  value ="∨"  onclick ='<%="showdb(\""+  this.ClientID +"\");" % > '/>
< asp:RegularExpressionValidator  ID ="regDate"  runat ="server"  ErrorMessage ="*"  ControlToValidate  ="birthdate"  ValidationExpression ="^\d{2,4}-[0|1]?[0-9]-[0|1|2|3]?[0-9]$" > 日期类型格式必须是(年-月-日) </ asp:RegularExpressionValidator >
   < div  id ="input_birth"  style ="visibility :hidden; width:200px; height:128;"   >
     < table  border ="0"  cellpadding ="0"  cellspacing ="0"  style ="border-collapse: collapse"  style ="cursor:hand"  bordercolor ="#111111"  width ="100%"   height ="26" >
     < tr >
      < td  width ="100%"  colspan ="3"  height ="26" > &nbsp;&nbsp;   < input  type ="button"  value ="&lt;&lt;"  onclick ='<%="plusyear(\""+  this.ClientID +"\")"  % > ' /> 
       < input  type ="button"  value ="&lt;"  onclick ='<%="plusmonth(\""+  this.ClientID +"\")"  % > '/> &nbsp;   < font  id ="year" >
       </ font > 年 < font  id ="month" ></ font > 月 
       < input  type ="button"  value ="&gt;"  onclick ='<%="addmonth(\""+  this.ClientID +"\")"  % > ' /> 
       < input  type ="button"  value ="&gt;&gt;"  onclick ='<%="addyear(\""+  this.ClientID +"\")"  % > ' /> </ td >
     </ tr >
      < tr >
       < td  width ="100%"  colspan ="3"  height ="119"  valign ="top" >
      < table  id ="tabDate"  border ="0"  cellpadding ="0"  cellspacing ="0"  style ="border-collapse: collapse"  bordercolor ="#111111"  width ="200" >
         < tr >
         < td  width ="14%"  align ="center" >< b >< font  color ="#FF0000" > 日 </ font ></ b ></ td >
         < td  width ="14%"  align ="center" >< b > 一 </ b ></ td >
         < td  width ="14%"  align ="center" >< b > 二 </ b ></ td >
         < td  width ="14%"  align ="center" >< b > 三 </ b ></ td >
         < td  width ="14%"  align ="center" >< b > 四 </ b ></ td >
         < td  width ="15%"  align ="center" >< b > 五 </ b ></ td >
         < td  width ="15%"  align ="center" >< b >< font  color ="#FF0000" > 六 </ font ></ b ></ td >
       </ tr >
       < tr >
         < td  width ="14%"  align ="center"  id ="day"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '> </ td >
         < td  width ="14%"  align ="center"  id ="Td1"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td2"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td3"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td4"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td5"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td6"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         </ tr >
         < tr >
           < td  width ="14%"  align ="center"  id ="Td7"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td8"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td9"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td10"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td11"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td12"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td13"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >



   </ tr >
       < tr >
         < td  width ="14%"  align ="center"  id ="Td14"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td15"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td16"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td17"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td18"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td19"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td20"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
       </ tr >
       < tr >
         < td  width ="14%"  align ="center"  id ="Td21"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td22"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td23"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td24"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td25"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td26"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td27"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
       </ tr >
       < tr >
         < td  width ="14%"  align ="center"  id ="Td28"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td29"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td30"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td31"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td32"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td33"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >    < td  width ="15%"  align ="center"  id ="Td34"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
       </ tr >
       < tr >
         < td  width ="14%"  align ="center"  id ="Td35"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td36"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td37"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td38"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="14%"  align ="center"  id ="Td39"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td40"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
         < td  width ="15%"  align ="center"  id ="Td41"  onclick ='<%="add_day(\""+this.ClientID+"\",this.innerText);"  % > '>　 </ td >
       </ tr >
     </ table >
     </ td >
   </ tr >
   < tr >
     < td  width ="33%"  height ="1" ></ td >
     < td  width ="33%"  height ="1" ></ td >
     < td  width ="34%"  height ="1" ></ td >
     </ tr >
   </ table >
  
</ div >
</ div >

即调用每个javascript函数都绑定到了this.ClientID,同时要注意在Page_Load过程中必须加入方法this.DataBind();要不然无法绑定，服务器代码如下：

   protected   void  Page_Load( object  sender, EventArgs e)
     {
        //ClientScriptManager cmr = Page.ClientScript;
        //cmr.RegisterStartupScript(this.GetType(), "inputDateModID", "_inputDateMod_Id=\"" + this.ClientID + "\";", true);
        this.DataBind();
    }

二、修改javascript
   javascript放在另一个文件较好，不要跟ascx文件在一起，那种在aspx页输入时如果有多个此控件如出现重复多余的javascript代码，如是另外新建一个js文件inputDate.js，代码如下：

//  JScript 文件



function  getElement(clientID,tag,id)
{
    var root=document.getElementById(clientID+"_root");
     var divlist=root.getElementsByTagName (tag);
 
    for(var i=0;i<divlist.length;i++)
    {
        if(divlist[i].attributes.getNamedItem("id").value==id)
        {
           return divlist[i];
           
        }
    }
    return null;
}
   function  showdb(clientID)   // 显示控件/隐藏空间
   {
    //var root=document.getElementById(clientID+"_root");
   
    var a=getElement(clientID,'div','input_birth');
   
    if(a.style.visibility =="visible")
   {
     a.style.visibility ="hidden";
     return ;
   }
 
    var CurrentDate=new Date();
    var CYear=CurrentDate.getFullYear();
    var CMonth=CurrentDate.getMonth();
    var CDay=CurrentDate.getDay();
    var obj_year=getElement(clientID,'font','year');
    //var obj_year=document.getElementById("year");  //当展开控件时自动取到当前时间（客户端）
    obj_year.innerText=CYear;
    var obj_month=getElement(clientID,'font','month');
    //var obj_month=document.getElementById("month");
    obj_month.innerText=CMonth+1;
  
  
    displayCalendar(clientID,CMonth,CYear)
  
  
  
 var  btn=getElement(clientID,'input',"popButton");
 //document.getElementById("popButton");
   var left=btn.offsetLeft;
   var top=btn.offsetTop ;
   obj=btn;
   while(obj=obj.offsetParent)
   {
    left+=obj.offsetLeft;
    top+=obj.offsetTop;
   }
   
   a.style.top=(top+20)+"px";
   a.style.left=(left-150)+"px";
     a.style.visibility ="visible";
  }
   function  addyear(clientID)
    {
   var obj_year=getElement(clientID,'font','year');
   var obj_month=getElement(clientID,'font',"month");

   var num_year=obj_year.innerText;

obj_year.innerText=parseInt(num_year)+1;  //年数增加
   
   displayCalendar(clientID,obj_month.innerText-1,obj_year.innerText);
  }
   function  plusyear(clientID)
    {
    
   var obj_year=getElement(clientID,'font',"year");
   var obj_month=getElement(clientID,'font',"month");
   
   var num_year=obj_year.innerText;
   obj_year.innerText=parseInt(num_year)-1;  //年数减少
   
   displayCalendar(clientID,obj_month.innerText-1,obj_year.innerText);
  }
   function  addmonth(clientID)
   {
    // alert("ok");
     var obj_month=getElement(clientID,'font',"month");
     var obj_year=getElement(clientID,'font',"year");
   
     
     if(parseInt(obj_month.innerText)>=12)        //月数增加到12时，年数相应增加1，月数从1开始
     {
      obj_month.innerText="0";
      //obj_year=document.getElementById("year");
      var num_year=obj_year.innerText;
      obj_year.innerText=parseInt(num_year)+1;
     }
   
       var num_month=obj_month.innerText;
      obj_month.innerText=parseInt(num_month)+1;  //月数增加
   
     displayCalendar(clientID,obj_month.innerText-1,obj_year.innerText);
    }
     function  plusmonth(clientID)
     {
   
     var obj_month=getElement(clientID,'font',"month");
     var obj_year=getElement(clientID,'font',"year");
   
    if(parseInt(obj_month.innerText)<=1)    //月数减少到1时，年数相应减少1，月数从12开始
   {
      obj_month.innerText="13";
      obj_year=document.getElementById("year");
      var num_year=obj_year.innerText;
      obj_year.innerText=parseInt(num_year)-1;
     }
   
     var num_month=obj_month.innerText;
   obj_month.innerText=parseInt(num_month)-1;  //月数减少
     
     displayCalendar(clientID,obj_month.innerText-1,obj_year.innerText);
  }

   function  numberOfDays(month,year)   // 取得每月天数，判断平年闰年
   {
    var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    n=numDays[month];
    if(month==1)
        if((year%400==0)||(year%100!=0&&year%4==0)) ++n;
    return n;
  }

   function  displayCalendar(clientID,month,year)
   {

    var d=new Date(year,month,1);
    var startDay=d.getDay();   //日期起始数字
   var numDays=numberOfDays(month,year);  //本月天数  
  
    var tabEm=getElement(clientID,'table',"tabDate");
  
    for(var i=1;i<tabEm.rows.length;i++)
    {
    
        for(var j=0;j<tabEm.rows[i].cells.length;j++)
        {
          //alert((i-1)*tabEm.rows[i].cells.length+j+1-startDay);
          var dd=(i-1)*tabEm.rows[i].cells.length+j+1-startDay;
       //   alert(dd+"|"+startDay);
            if((i-1)*tabEm.rows[i].cells.length+j+1<=startDay)
            {
                 tabEm.rows[i].cells[j].innerText="";
            }
            else if ((i-1)*tabEm.rows[i].cells.length+j+1>numDays+startDay)
            {
                  tabEm.rows[i].cells[j].innerText="";
            }
            else
            {    tabEm.rows[i].cells[j].innerText=dd;}
        }
    }
  
  }
   function  writeDate(n)
   {
     document.writeln("<H3 ALIGN='CENTER'>"+n+"</H3>");
   }

   function  add_day(mod, day)
   {
   //  bd.birthdate.value=year+"-"+month+"-"+day;
   var year=getElement(mod,'font',"year");
   var month=getElement(mod,'font',"month");

   var em=document.getElementById(mod+"_birthdate");
   em.value=year.innerText+"-"+month.innerText+"-"+day;
  }

其中所有获取元素的方法均改成通过getElement方法完成，这样就能够完成一个aspx页内有多个此自定义控件的情况。其中有很多方法做了改进，如设置日期控件的位置，如果是日历是visible的就直接return等，想完全掌握就自己看
四、定义控件的属性
在.cs文件中加入如下代码：

   public  System.Text.RegularExpressions.Regex RegExpression
     {
        get {
            System.Text.RegularExpressions.Regex _reg = new System.Text.RegularExpressions.Regex(regDate.ValidationExpression);
            return _reg; }
    }
     public   string  Text
     {
        get { return this.birthdate.Text; }
        set {
            if (RegExpression.IsMatch(value)) this.birthdate.Text = value;
            else new Exception("非日期类型字符串");
        }
    }
     public  DateTime DateValue
     {
        get {
            
            return DateTime.Parse(this.birthdate.Text);
        }
        set
        {
            this.birthdate.Text = value.ToString("yyyy-MM-dd");
        }
    }

另外还要设置日期控件的css

#input_birth  {} {
    position:absolute ;
    left:20px;
    top:35px;
    width:200px;
    height:128;
    z-index:30;
    background-color:White ;
}

搞定!!