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, " width: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 οnmοuseοver=\ " this .style.backgroundColor = ' #CCC ' \ " οnmοuseοut=\ " this .style.backgroundColor = '' \ " οnmοusedοwn='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='上一年份' οnmοuseοver=\ " this .style.color = ' #F90 ' \ " οnmοuseοut=\ " this .style.color = ' #09F ' \ " οnclick=\ " JCalendar.update( - 12 ); return false \ " style='color:#09F;font-size:16px;margin-right:5px;'>&laquo;</span><span title='上一月份' οnmοuseοver=\ " this .style.color = ' #F90 ' \ " οnmοuseοut=\ " this .style.color = ' #09F ' \ " οnclick=\ " JCalendar.update( - 1 ); return false \ " style='margin-right:15px;color:#09F;'>▲</span><span id='calendar_title'> " + JCalendar.yyyy + " 年 " + JCalendar.mm + " 月</span><span title='下一月份' οnclick=\ " JCalendar.update( 1 ); return false \ " οnmοuseοver=\ " this .style.color = ' #F90 ' \ " οnmοuseοut=\ " this .style.color = ' #09F ' \ " style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' οnclick=\ " JCalendar.update( 12 ); return false \ " οnmοuseοver=\ " this .style.color = ' #F90 ' \ " οnmοuseοut=\ " 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();
}

 

 

转载于:https://www.cnblogs.com/cnbwang/archive/2010/11/28/1890132.html