原文: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"> <input type="button" value="<<" onclick='<%="plusyear(\""+ this.ClientID +"\")" %>' /> <input type="button" value="<" onclick='<%="plusmonth(\""+ this.ClientID +"\")" %>'/> <font id="year"> </font>年<font id="month"></font>月 <input type="button" value=">" onclick='<%="addmonth(\""+ this.ClientID +"\")" %>' /> <input type="button" value=">>" 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> 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放在另一个文件较好，不要跟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; }四、定义控件的属性
在.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"); } }#input_birth { position:absolute ; left:20px; top:35px; width:200px; height:128; z-index:30; background-color:White ;}搞定!!