用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" %>

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

<tr>

</font>年<font id="month"></font>月

<input type="button" value=">" onclick='<%="addmonth(\""+ this.ClientID +"\")" %>' />

<input type="button" value=">>" onclick='<%="addyear(\""+ this.ClientID +"\")" %>' /></td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

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

}

搞定!!