在网上找到一个js的日期选着控件calendar.htc
<public:component tagname="calendar"> <public:attach event="onfocus" onevent="show()" /> <public:attach event="onblur" onevent="hide()" /> <public:property name="format" /> <public:property name="status" /> <public:method name="showCurrentDate" /> <public:method name="hide" /> <public:method name="showMore" /> <script> if (format==null) format = "yyyy-mm-dd"; function calculateSumOffset(item, offsetName) { var totalOffset = 0; do { totalOffset += eval('item.'+offsetName); item = eval('item.offsetParent'); } while (item != null); return totalOffset; } function hideElement(elmID) { var leftX, rightX, topY, bottomY, objLeft, objTop; for (i = 0; i < document.all.tags(elmID).length; i++) { obj = document.all.tags(elmID)[i]; if (! obj || ! obj.offsetParent) continue; // Find the element's offsetTop and offsetLeft relative to the BODY tag. leftX = calculateSumOffset(tblMonthView, 'offsetLeft'); rightX = leftX + tblMonthView.offsetWidth; topY = calculateSumOffset(tblMonthView, 'offsetTop'); bottomY = topY + tblMonthView.offsetHeight; objLeft = calculateSumOffset(obj, 'offsetLeft'); objTop = calculateSumOffset(obj, 'offsetTop'); if (leftX > (objLeft + obj.offsetWidth) || objLeft > rightX) ; else if (objTop > bottomY) ; else obj.style.visibility = "hidden"; } } function showElement(elmID) { for (i = 0; i < document.all.tags(elmID).length; i++) { obj = document.all.tags(elmID)[i]; if (! obj || ! obj.offsetParent) continue; obj.style.visibility = ""; } } var arrWeekName = new Array("日","一","二","三","四","五","六"); var today = new Date(); var currentYear, currentMonth, inputYear, inputMonth, inputDate; currentYear = inputYear = today.getYear(); currentMonth = inputMonth = today.getMonth(); inputDate = today.getDate(); status = false; var tblMonthView, trWeek, tdToday; var tblShowDay; var spanCurrentMonth, spanCurrentYear; var divMore; var strHTML = '<table id="MonthView' + uniqueID + '" cellpadding=0 cellspacing=0 lang=ch onselectstart="return false" onmouseover="' + uniqueID + '.status=true;" onmouseout="' + uniqueID + '.status=false;" style="position:absolute; display:none; background:#FFFFFF; border:1 solid black;width:220;cursor:hand;">' + '<tr>' + ' <td>' + ' <table width="100%" border=0 cellpadding=1 cellspacing=1 id="ShowDay' + uniqueID + '" style="font-size:9pt;">' + ' <tr align="center">' + ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'py/')">33</td>' + ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'pm/')">3</td>' + ' <td colspan="3" style="color:black;font-family:宋体;font-weight:bold;" nowarp>' + ' <span id="CurrentYear' + uniqueID + '" style="text-decoration:underline;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showMore(1990,2020,this.innerHTML)"></span> 年' + ' <span id="CurrentMonth' + uniqueID + '" style="text-decoration:underline;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showMore(1,12,this.innerHTML)"></span> 月</td>' + ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'nm/')">4</td>' + ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'ny/')">44</td>' + ' </tr>' + ' <tr id="Week' + uniqueID + '" style="font-size:9pt; color:black; text-align:center;"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' + ' <tr><td colspan=7 style="background-color:black; height:1pt;"></td></tr>' + ' </table>' + ' </td>' + '</tr>' + '<tr><td style="background-color:black; height:1pt;"></td></tr>' + '<tr>' + ' <td>' + ' <table width="100%" border=0 cellpadding=1 cellspacing=1>' + ' <tr style="font-size:9pt; color:black;">' + ' <td id="Today' + uniqueID + '"></td>' + ' <td id="Button' + uniqueID + '" style="text-align:right;" onclick="' + uniqueID + '.status=false;' + uniqueID + '.hide();">[关闭]</td>' + ' </tr>' + ' </table>' + ' </td>' + ' </tr>' + '</table>' + '<div id="More' + uniqueID + '" style="display:none; cursor:hand; font:9px verdana; width:80px; position:absolute; border:1px solid #425E87; overflow-y:scroll; overflow-x:hidden; background-color:#fff; FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5); SCROLLBAR-FACE-COLOR: #E5E9F2; SCROLLBAR-HIGHLIGHT-COLOR:#E5E9F2; SCROLLBAR-SHADOW-COLOR:#A4B9D7; SCROLLBAR-3DLIGHT-COLOR: #A4B9D7; SCROLLBAR-ARROW-COLOR:#000000; SCROLLBAR-TRACK-COLOR:#eeeee6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;"></div>'; element.insertAdjacentHTML("afterEnd",strHTML); tblMonthView = eval("MonthView" + uniqueID); trWeek = eval("Week" + uniqueID); tdToday = eval("Today" + uniqueID); tblShowDay = eval("ShowDay" + uniqueID); spanCurrentMonth = eval("CurrentMonth" + uniqueID); spanCurrentYear = eval("CurrentYear" + uniqueID); divMore = eval("More" + uniqueID); for (var i=0; i<arrWeekName.length; i++) trWeek.cells[i].innerHTML = arrWeekName[i]; tdToday.attachEvent("onclick", setTodayValue); function formatDate(y, m, d, strFormat) { var dm = (m>=10?m:"0" + m), dd = (d>=10?d:"0" + d); return strFormat.replace(/yyyy/ig, y).replace(/mm/ig, dm).replace(/dd/ig, dd).replace(/m/ig, m).replace(/d/ig, d); } function setCaption(){ spanCurrentYear.innerHTML = currentYear; spanCurrentMonth.innerHTML = formatDate(0, currentMonth + 1, 0, "mm"); } function bulidDay(){ var arrMonthDay = new Array(31,28,31,30,31,30,31,31,30,31,30,31); if ((currentYear % 400 == 0) || ((currentYear % 100!=0) && (currentYear % 4==0))) arrMonthDay[1] = 29; while (tblShowDay.rows.length>3) tblShowDay.deleteRow(3); firstDay = new Date(currentYear,currentMonth,1); weekDay = firstDay.getDay(); prevMonthEnd = arrMonthDay[(currentMonth>0?currentMonth - 1:11)]; prevMonthStart = prevMonthEnd - weekDay; thisMonthStart = 0; thisMonthEnd = arrMonthDay[currentMonth]; nextMonthStart = 0; var d = new Date(); var nowDate = d.getDate(); var nowMonth = d.getMonth(); var nowYear = d.getYear(); var i, j; for (i=0; i<6; i++) { tempRow = tblShowDay.insertRow(); for (j=0; j<7; j++) { tempCell = tempRow.insertCell(); tempCell.style.cssText = "border:1pt solid white; font-size:9pt; color:#808080; text-align:center;"; //填充当月1号以前的日期 if (prevMonthStart<prevMonthEnd) tempCell.innerHTML = ++prevMonthStart; //填充本月日期 else if (thisMonthStart<thisMonthEnd) { tempCell.style.color = ((j==0 || j==6)?"red":"black"); tempCell.innerHTML = ++thisMonthStart; tempCell.onclick = action; tempCell.onmouseover = mouseover; tempCell.onmouseout = mouseout; if (nowYear==currentYear && nowMonth==currentMonth && nowDate==thisMonthStart) tempCell.style.border = "1pt solid red"; if (inputYear==currentYear && inputMonth==currentMonth && inputDate==thisMonthStart) tempCell.bgColor = "menu"; } //填充下月日期 else tempCell.innerHTML = ++nextMonthStart; } } } function setTodayValue(){ with (new Date()) { var strDate = formatDate(getYear(), (getMonth() + 1), getDate(), "yyyy-mm-dd"); tdToday.innerHTML = "今日：" + strDate; element.value = strDate; } status = false; hide(); } function setToday(){ with (new Date()) { tdToday.innerHTML = "今日：" + formatDate(getYear(), (getMonth() + 1), getDate(), "yyyy-mm-dd"); } } function showCurrentDate(cmd) { switch (cmd) { case "py":currentYear--; break; case "ny":currentYear++; break; case "pm":if (--currentMonth<0) { currentMonth = 11; currentYear--; } break; case "nm":if (++currentMonth>11) { currentMonth = 0; currentYear++; } break; } setCaption(); bulidDay(); setToday(); //element.focus(); hideElement("SELECT"); hideElement("OBJECT"); } function show() { if (!status) { var ParseRegx = new RegExp(format.replace(/yyyy/g, "(//d{4})").replace(/mm/g, "(//d{2})").replace(/dd/g, "(//d{2})"), "g"); var t = element.value.replace(ParseRegx, "$2-$3-$1"); var d = new Date(t); if (isNaN(d)) d = new Date(); inputYear = currentYear = d.getYear(); inputMonth = currentMonth = d.getMonth(); inputDate = d.getDate(); element.value = formatDate(inputYear, (inputMonth + 1), inputDate, format); setCaption(); bulidDay(); setToday(); tblMonthView.style.top = calculateSumOffset(element, "offsetTop") + element.offsetHeight; tblMonthView.style.left = calculateSumOffset(element, "offsetLeft"); tblMonthView.style.display = "block"; element.focus(); hideElement("SELECT"); hideElement("OBJECT"); } } function hide() { if (!status) { showElement("SELECT"); showElement("OBJECT"); tblMonthView.style.display = "none"; } } function mouseover(){ this.bgColor="#9999FF"; } function mouseout(){ if (inputYear==currentYear && inputMonth==currentMonth && inputDate==this.innerHTML) this.bgColor="menu"; else this.bgColor="#FFFFFF"; } function action(){ inputYear = currentYear; inputMonth = currentMonth; inputDate = this.innerHTML; bulidDay(); element.value = formatDate(inputYear, (inputMonth + 1), inputDate, format); status = false; hide(); } var cssNotSelect = "padding:0px 0px 2px 5px; width:100%; color:#000; letter-spacing:2px; text-decoration:none;", cssSelected = "background-color:#00006C;color:#fff;padding:0px 0px 2px 5px; width:100%; letter-spacing:2px; text-decoration:none;"; function showMore(starNum,endNum,selectedValue){ var obj = window.event.srcElement; var selectedIndex = selectedValue - starNum; divMore.style.height = 0; divMore.style.top = calculateSumOffset(obj, "offsetTop") + obj.offsetHeight; divMore.style.left = calculateSumOffset(obj, "offsetLeft"); divMore.selectedIndex = selectedIndex; divMore.onclick = function() { var selectedObj = window.event.srcElement; if( "nobr" == selectedObj.tagName.toLowerCase() && divMore.contains(selectedObj)) { var tmp = parseInt(selectedObj.innerHTML, 10); if(parseInt(obj.innerHTML, 10) != tmp) { if (tmp>12) { obj.innerHTML = tmp; currentYear = tmp; } else { obj.innerHTML = formatDate(0, tmp, 0, "mm"); currentMonth = tmp - 1; } showCurrentDate(""); } } } divMore.onlosecapture = alert var strHTML = ""; for(var i=starNum;i<=endNum;i++){ strHTML += "<nobr οnmοuseοver=/"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='" + cssNotSelect + "';this.style.cssText='" + cssSelected + "'/" οnmοuseοut=/"this.style.cssText='" + cssNotSelect + "'/" style=/"" + cssNotSelect + "/">"+i+"</nobr><br>" } divMore.innerHTML = strHTML; showBox(150); } function showBox(iHeight) { divMore.style.height =1; divMore.style.display = "block"; window.clearInterval(divMore.timeHandle); divMore.timeHandle = window.setInterval(interValHandle,1); var s = 0,t = 1; function interValHandle() { divMore.scrollTop = 1000000; s = s + t*t; t += 0.5; divMore.style.height = parseInt(divMore.style.height) + Math.floor(s); //divMore.style.width = 65 / iHeight * divMore.offsetHeight; if( divMore.offsetHeight > iHeight ) { window.clearInterval(divMore.timeHandle); divMore.style.height = iHeight; divMore.scrollTop = divMore.childNodes[0].offsetHeight * divMore.selectedIndex; divMore.getElementsByTagName("nobr")[divMore.selectedIndex].style.cssText = cssSelected; window.document.attachEvent("onclick", divMore.hide = function() { divMore.style.display = "none"; window.document.detachEvent("onclick", divMore.hide); } ); } } } </script></public:component> 加工成自定义控件 InputCalendar.cs using System; using System.ComponentModel; using System.Drawing; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;[assembly: TagPrefix( " Jxmstc " , " Jxmstc " )] namespace Jxmstc { [ DefaultProperty("Text"), ToolboxData(@"<{0}:InputCalender ID='iptCad' runat='server'></{0}:InputCalender>") ] /**//// <summary> /// 日期输入控件， /// </summary> public class InputCalender : CompositeControl { private TextBox _textBox; [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("获取或设置文本框输入文本") ] public string Text { get { EnsureChildControls(); return _textBox.Text; } set { EnsureChildControls(); _textBox.Text = value; } } [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("长度") ] public int CssWidth { get { return (ViewState["Length"] != null ? (int)ViewState["Length"] : 100); } set { ViewState["Length"] = value; } } [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("最大输入长度") ] public int MaxLength { get { return (ViewState["MaxLength"] != null ? (int)ViewState["MaxLength"] :10); } set { ViewState["MaxLength"] = value; } } [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("是否只读") ] public bool ReadOnly { get { return (ViewState["ReadOnly"] != null ? (bool)ViewState["ReadOnly"] : false); } set { ViewState["ReadOnly"] = value; } } [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("脚本资源文件地址") ] public string ScriptUrl { get { return (ViewState["ScriptUrl"] != null ? (string)ViewState["ScriptUrl"] :""); } set { ViewState["ScriptUrl"] = value; } } public InputCalender() { //this.ScriptUrl = GetAppRootPath() + "Images/calendar.htc"; //Jxmstc.RootPath mypath = new RootPath(); } protected override void CreateChildControls() { Controls.Clear(); _textBox = new TextBox(); _textBox.ID = "iptCad"; _textBox.ReadOnly = this.ReadOnly; _textBox.MaxLength = this.MaxLength; _textBox.Width = this.CssWidth; if (this.ScriptUrl =="") { this.ScriptUrl = GetAppRootPath() +"Images/calendar.htc"; } _textBox.Style.Add("behavior", "url(" + ScriptUrl + ")"); this.Controls.Add(_textBox); } protected override void Render(HtmlTextWriter writer) { AddAttributesToRender(writer); _textBox.RenderControl(writer); } //<summary> //获取网站根目录 //</summary> //<returns></returns> protected string GetAppRootPath() { try { string s = HttpContext.Current.Request.ApplicationPath; //string s = ""; if (s != "/") { s += "/"; } return s; } catch { return ""; } } }} 使用的时候，将calendar.htc放入网站根目录的Images中，同时在web.config中添加 < globalization requestEncoding ="GB2312" responseEncoding ="GB2312" /> 源码 /Files/longren629/InputCalender.rar