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

搞定!!