创建下拉式日期选择控件

media="all" href="http://hits.blog.sina.com.cn/hits?act=1&aid=49e45f77010008ie" type="text/css" rel="Stylesheet" />

创建下拉式日期选择控件 一、页面设计   页面设计很简单,新建一个Web User Control（以下简称WUC）,放三个DropDownList,分别取名为Year,Month,Day.然后写三个字:年,月,日. 二、后台代码         protected void Page_Load(object sender, EventArgs e)     {         if (!IsPostBack)         {             //填充DropDownList             int i = 0;             Year.Items.Clear();             for (i = 1900; i <= DateTime.Now.Year; i++)             {                 ListItem item = new ListItem(i.ToString(), i.ToString());                 Year.Items.Add(item);             }             Month.Items.Clear();             for (i = 1; i <= 12; i++)             {                 string t = i < 10 ? "0" + i.ToString() : i.ToString();                 ListItem item = new ListItem(t, i.ToString());                 Month.Items.Add(item);             }             Day.Items.Clear();             for (i = 1; i <= 31; i++)             {                 string t = i < 10 ? "0" + i.ToString() : i.ToString();                 ListItem item = new ListItem(t, i.ToString());                 Day.Items.Add(item);             }             //给年和月的onchange 绑定方法，用于处理闰年的情况             Year.Attributes["onchange"] = "OnSelectChange(" + Year.ClientID + "," + Month.ClientID + "," + Day.ClientID +");";             Month.Attributes["onchange"] = "OnSelectChange(" + Year.ClientID + "," + Month.ClientID + "," + Day.ClientID +");";             Year.SelectedValue = DateTime.Now.Year.ToString();             Month.SelectedValue = DateTime.Now.Month.ToString();             Day.SelectedValue = DateTime.Now.Day.ToString();         }     }     //公共属性，用于获取设置整个控件的日期值     public DateTime Date     {         get { return DateTime.Parse(Year.SelectedValue+"-"+Month.SelectedValue+"-"+Day.SelectedValue); }         set         {             Year.SelectedValue = value.Year.ToString();             Month.SelectedValue = value.Month.ToString();             Day.SelectedValue = value.Day.ToString();         }     } 三、（重点）Javascript脚本代码 //!----放在ascx文件中------------------ //下面的代码是用于处理闰年的情况    var bigArray=new Array(1,3,5,7,8,10,12);    function OnSelectChange(year,month,day)    {       if(month.value==2)//选中的月份为2月       {         if(checkYear(year.value))//闰年         {            fillDay(day,29);         }         else         {            fillDay(day,28);         }       }       else       {          if(inArray(month.value,bigArray))          {            fillDay(day,31);          }          else          {            fillDay(day,30);          }       }    }    function checkYear(year)    {      return (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) ? 1 : 0;    }    function fillDay(day,days)    {       while(day.options.length>0)       {         day.remove(0);       }       for(i=1;i<=days;i++)       {         var oOption=document.createElement("OPTION");         if(i<10)         {             oOption.innerText="0"+i;         }         else         {             oOption.innerText=i;         }         oOption.value=i;         day.appendChild(oOption);       }    }    function inArray(oObj,oArray)    {      for(i=0;i<oArray.length;i++)      {        if(oObj==oArray[i])        {          return true;        }      }      return false;    } //下面的代码比较难理解，不过是最重要的(还是在ascx文件中)    eval("function <%=this.ClientID %>() { this.getDateValue=<%=this.ClientID %>getDateValue;}");       eval("function <%=this.ClientID %>getDateValue() { return new Date(document.all.<%=Year.ClientID %>.value,document.all.<%=Month.ClientID %>.value,document.all.<%=Day.ClientID %>.value);}"); 代码说明：        由于种种原因（比如使用了MasterPage,或者GridView中的模版列），一个控件在设计时的ID往往不同于生成页面后的ID，为了获得一个    控件客户端ID，我们可以在Javascript中插入如下代码<%=control.ClientID>来获得其客户端ID。        但是如果想要得到ID的control是一个WUC的话，当生成页面后尽管能得到其ClientID,但是却得不到这个对象,所以也就不能设置或    获得其属性了。        比如，我要做的这个控件，由三个DropDownList组成，可是我却想得到一个完整的日期值（指在客户端），一种思路是先获得三个    DropDownList的ClientID,然后再由ID1.value+ID2.value+ID3.value取得，可是如果你一个页面上需要放多个这样的WUC的话，你需要取得    多少个ClientID?显然这样做的话，工作量会很大，而且要操作众多的对象，很容易出错。        于是，我想了另外一个思路，Javascript允许创建自己的"类"（对象），那么我就把整个控件看作一个类，然后提供一个方法，用于    获得其子控件组合后的一个日期值。在处理技巧上，我把这个类命名为整个WUC的ClientID.伪代码如下：        //!---下面的代码写在ascx文件中,由于涉及执行字符串中的代码,所以用了eval()----------        //!---eval()的用法去参考Javascript教程----------------------        //定义一个"类"        function 控件的ClientID()        {          //声明一个方法          this.getDateValue=getDateValue;        }        //定义要调用的方法        function getDateValue(子控件1的ClientID,子控件2的ClientID,子控件3的ClientID)        {           return 子控件组合后的日期值；        }                      //!--------------下面的代码写在aspx页面中---------------------        //在生成页面的脚本中使用这个"类"        var birthday=new 控件的ClientID;        birthday=birthday.getDateValue();                   象上面这么做会出现一个新的问题，如果放了多个WUC，那么就会生成一些重名的函数，如果这些函数中不操作具体页面上的对象       倒也无所谓，可是象getDateValue(子控件1的ClientID,子控件2的ClientID,子控件3的ClientID)这样的函数，每个WUC的       子控件的ClientID是不同的，如果存在重名函数的话，会出现某一个被调多次，另一个不被调用的情况。所以要对每一个       WUC产生的getDateValue函数重新命名。每个WUC的ClientID是不同，如果给这些方法名前面再加上一个ClientID，       那么这些控件就能各自调用各自产生的函数了。修改如下：              //定义一个"类"        function 控件的ClientID()        {          //声明一个方法          this.getDateValue=控件的ClientID+getDateValue;        }        //定义要调用的方法        function 控件的ClientID+getDateValue(子控件1的ClientID,子控件2的ClientID,子控件3的ClientID)        {           return 子控件组合后的日期值；        }               而在aspx页面中调用的代码不用更改，仍然是:        var birthday=new 控件的ClientID;        birthday=birthday.getDateValue();                      测试一下吧。往一个页面上放三个这样的控件wuc1,wuc2,wuc3        调用如下：        var date1=new <%=wuc1.ClientID>;        date1=date1.getDateValue();        var date2=new <%=wuc2.ClientID>;        date2=date2.getDateValue();        var date3=new <%=wuc3.ClientID>;        date3=date3.getDateValue();               怎么样，是不是很方便？？？？