创建下拉式日期选择控件
一、页面设计
页面设计很简单,新建一个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();
怎么样，是不是很方便？？？？
|
|
