在网上找到一个js的日期选择控件，然后把它加工成自定义控件了。

在网上找到一个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\')">33td>'
        + '            <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=\'white\'" onmouseout="this.style.color=\'black\'" onclick="' + uniqueID + '.showCurrentDate(\'pm\')">3td>'
        + '            <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>&nbsp;年'
        + '                <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>&nbsp;月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\')">4td>'
        + '            <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=\'white\'" onmouseout="this.style.color=\'black\'" onclick="' + uniqueID + '.showCurrentDate(\'ny\')">44td>'
        + '        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 += ""this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='" + cssNotSelect + "';this.style.cssText='" + cssSelected + "'\"  οnmοuseοut=\"this.style.cssText='" + cssNotSelect + "'\" style=\"" + cssNotSelect + "\">"+i+"
" 
        }
        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'>")
    ]
    /**//// 

    /// 日期输入控件，
    /// 

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

        }
        //

        //获取网站根目录
        //

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

转载于:https://www.cnblogs.com/longren629/archive/2007/01/28/632696.html