ASP.NET 简单的日历自定义控件

项目中有许多页面都要用到日期选择框，为了统一管理，就制作了一个简单的自定义控件，效果如下：

功能：鼠标点击输入框，弹出日期选择画面。

后台和前台代码如下

[DefaultProperty("Text")]
    [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1>")]
    public class BTCalendar : CompositeControl
    {
        private TextBox tb;
        private Image img;
        private string javascriptFile = "~/js/JScript1.js";

        [Category("基本设置")]
        [Browsable(true)]
        [Description("日历控件所引用的javascript文件")]
        [Editor("System.Web.UI.Design.UrlEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
        [DefaultValue("~/js/JScript1.js")]
        public string JavascriptFile
        {
            get { return javascriptFile; }
            set { javascriptFile = value; }
        }

        [Category("基本设置")]
        [Browsable(true)]
        [Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
        public string ImgFile { get; set; }
        
        protected override void CreateChildControls()
        {
            tb = new TextBox();
            tb.ID = "BTTextBox1";
            tb.Style.Add(HtmlTextWriterStyle.BorderWidth, "0");
            tb.Style.Add(HtmlTextWriterStyle.Width,"80%");
            tb.Attributes.Add("onmousedown", "JCalendar.show(this);");
            this.Controls.Add(tb);

            img = new Image();
            img.ID = "BTImg1";
            img.ImageUrl = this.ImgFile;
            img.Style.Add(HtmlTextWriterStyle.VerticalAlign, "middle");
            this.Controls.Add(img);
 
        }
        protected override void OnPreRender(EventArgs e)
        {
            string file = base.ResolveUrl(JavascriptFile);
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "b", "<script type='text/javascript' src='" + file + "'></script> ", false);
            base.OnPreRender(e);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#ddd");
            writer.AddAttribute(HtmlTextWriterAttribute.Style, "140px;");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "divDate");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            
            tb.RenderControl(writer);
            img.RenderControl(writer); 
            
            writer.RenderEndTag();
        }
    }

前途javascript代码如下

var tdSelected = "<span id='c_today' style='background-color:#036;color:#FFF;'>";
var tdNormal = "<div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onmousedown='JCalendar.mousedown(this)'>";
var globalDiv;

var JCalendar = function (obj) {

    var arr = obj.value.split("-");
    var _date = arr.length == 3 ? new Date(arr[0], arr[1] - 1, arr[2]) : new Date();


    var y = _date.getFullYear();
    var m = _date.getMonth();
    var d = _date.getDate();

    JCalendar.date = _date;
    JCalendar.yyyy = y;
    JCalendar.mm = m + 1;
    JCalendar.dd = d;
    JCalendar.fday = new Date(y, m, 1).getDay();
    JCalendar.dayNum = new Date(y, m + 1, 0).getDate();

    JCalendar.target = obj; 
    //obj.onblur = JCalendar.hide;
}


JCalendar.hide = function () {
    if (globalDiv) {
        globalDiv.style.visibility = "hidden";
    }
}
JCalendar.show = function (obj) {
    JCalendar(obj);
    var fd = JCalendar.fday;
    var date = new Array(JCalendar.fday > 0 ? JCalendar.fday : 0); //预先定义一段空数组，对应日历里第一周空的位置
    var html_str = new Array();
    var date_index = 0;
    var weekDay = ["日", "一", "二", "三", "四", "五", "六"];
    for (var j = 1; j <= JCalendar.dayNum; j++) { 
        date.push(j);
    }
    html_str.push("<table id='calendar'>");
    html_str.push("<caption><span title='上一年份' onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-12);return false\" style='color:#09F;font-size:16px;margin-right:5px;'>&laquo;</span><span title='上一月份'  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-1);return false\" style='margin-right:15px;color:#09F;'>▲</span><span id='calendar_title'>" + JCalendar.yyyy + "年" + JCalendar.mm + "月</span><span title='下一月份' onclick=\"JCalendar.update(1);return false\"  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' onclick=\"JCalendar.update(12);return false\"  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='font-size:16px;margin-left:5px;color:#09F;'>&raquo;</span></caption>");
    html_str.push("<thead><tr>");
    for (var i = 0; i < 7; i++) {//填充日历头
        html_str.push("<td>" + weekDay[i] + "</td>");
    }
    html_str.push("</tr></thead>");
    html_str.push("<tbody>");
    for (var i = 0; i < 6; i++) {//填充日期
        html_str.push("<tr>");
        for (var j = 0; j < 7; j++) {
            tmp = date[date_index++];
            tmp = tmp ? tmp : "";
            if (JCalendar.dd == tmp)
                html_str.push("<td>" + tdSelected + JCalendar.dd + "</span></td>");
            else if (tmp == "")
                html_str.push("<td></td>");
            else
                html_str.push("<td>" + tdNormal + tmp + "</div></td>");
        }
        html_str.push("</tr>");
    }
    html_str.push("</tbody></table>");

    if (!globalDiv) {
        globalDiv = document.createElement("div");
        globalDiv.id = "divDate";
        globalDiv.style.position = "absolute";
        globalDiv.style.backgroundColor = "gray";
        document.body.appendChild(globalDiv);
    }
    var rect = obj.getBoundingClientRect();
    globalDiv.innerHTML = html_str.join("");
    globalDiv.style.left = rect.left + "px";
    globalDiv.style.top = rect.top + rect.height + "px";
    globalDiv.style.visibility = "visible";
    event.cancelBubble = true;
}

//静态方法
JCalendar.update = function (_month) {
    var date = new Date(JCalendar.yyyy, JCalendar.mm - 1 + _month, 1);
    var fday = date.getDay(); //每月第一天的星期数
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dayNum = new Date(JCalendar.yyyy, JCalendar.mm + _month, 0).getDate(); //每月的天数
    var tds = document.getElementById("calendar").getElementsByTagName("td");
    for (var i = 7; i < tds.length; i++)//清空日历内容
        tds[i].innerHTML = "";
    document.getElementById("calendar_title").innerHTML = year + "年" + month + "月"; //更新显示年月
    //更新当前年月
    JCalendar.yyyy = year;
    JCalendar.mm = month;
    for (var j = 1; j <= dayNum; j++) {
        if (j == JCalendar.dd)
            tds[6 + fday + j].innerHTML = tdSelected + JCalendar.dd + "</span>";
        else
            tds[6 + fday + j].innerHTML = tdNormal + j + "</div>";
    }
    JCalendar.onupdate(year, month, JCalendar.dd);
} 

JCalendar.mousedown = function (obj) {
    var tmp = document.getElementById("c_today");
    tmp.parentNode.innerHTML = tdNormal + tmp.innerHTML + "</div>";
    JCalendar.dd = parseInt(obj.innerHTML);
    obj.parentNode.innerHTML = tdSelected + obj.innerHTML + "</span>";
    JCalendar.onmousedown(JCalendar.yyyy, JCalendar.mm, JCalendar.dd);
}

JCalendar.onmousedown = function (year, month, date) {
    JCalendar.target.value = year + "-" + month + "-" + date;
    JCalendar.hide();
}