让Calendar在页面调用时才显示 - 中国WEB开发者网络 (http://www.webasp.net) -- 技术教程 (http://www.webasp.net/article/) --- 让Calendar在页面调用时才显示 (http://www.webasp.net/article/25/24889.htm) |
| -- 作者:未知 -- 发布日期: 2005-06-10 |
| 最近常有朋友问起这样一个问题:在ASP.NET里如何做到当需要调用Calendar时,就让它显示,选择完时间后让它自动隐藏,并返回一个日期字符串到文本输入框内。 曾经我看到网上流行的一个用VB.NET写的UserControl实现了这部分功能,在这里我把它改成C#的版本,供需要的朋友下载学习。 总的来说这个功能分两步,第一步建立一个UserControl控件: 它的代码如下(popUpCalendar.ascx): <%@ Control Language="c#" AutoEventWireup="false" Codebehind="popUpCalendar.ascx.cs" Inherits="CalendarExample.popUpCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <asp:panel id="pnlCalendar" style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 0px" Width="301px" Height="163px" runat="server"> <asp:Calendar id="Calendar1" Width="307px" Height="164px" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" NextMonthText="<IMG src="monthright.gif" border="0">" PrevMonthText="<IMG src="monthleft.gif" border="0">"> <TodayDayStyle BackColor="#FFFFC0"></TodayDayStyle> <DayStyle Font-Size="8pt" Font-Names="Arial"></DayStyle> <DayHeaderStyle Font-Size="10pt" Font-Underline="True" Font-Names="Arial" BorderStyle="None" BackColor="#E0E0E0"></DayHeaderStyle> <SelectedDayStyle Font-Size="8pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="Navy"></SelectedDayStyle> <TitleStyle Font-Size="10pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="Navy"></TitleStyle> <OtherMonthDayStyle ForeColor="Gray"></OtherMonthDayStyle> </asp:Calendar> </asp:panel> 对就的codebehind文件如下(popUpCalendar.ascx.cs): namespace CalendarExample { using System; using System.Data; using System.Drawing; using System.Web; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; /// <summary> /// popUpCalendar 的摘要说明。 /// </summary> public abstract class popUpCalendar : System.Web.UI.UserControl { protected System.Web.UI.WebControls.Calendar Calendar1; protected System.Web.UI.WebControls.Panel pnlCalendar; private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN:该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// 设计器支持所需的方法 - 不要使用 /// 代码编辑器修改此方法的内容。 /// </summary> private void InitializeComponent() { this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged); this.Load += new System.EventHandler(this.Page_Load); } #endregion public void displayCalendar( string sCalToolText, DateTime dSelectedDate, string sDateFieldName , int iTop , int iLeft ) { if (pnlCalendar.Visible == false) { pnlCalendar.Style["top"] = iTop.ToString (); pnlCalendar.Style["left"] = iLeft.ToString (); Calendar1.SelectedDate = dSelectedDate; Calendar1.VisibleDate = dSelectedDate; Calendar1.ToolTip = sCalToolText; Calendar1.Attributes["SelectedField"] = sDateFieldName; pnlCalendar.Visible = true; } else hideCalendar(); } public void hideCalendar() { pnlCalendar.Visible = false; } private void Calendar1_SelectionChanged(object sender, System.EventArgs e) { TextBox txtDate; txtDate = (TextBox)Page.FindControl(Calendar1.Attributes["SelectedField"]); txtDate.Text = Calendar1.SelectedDate.ToShortDateString(); hideCalendar(); } } } 第二步,在asp.net文件里调用这个UserControl; 它的代码如下(dispCalendar.aspx): <%@ Register TagPrefix="sk" TagName="popUpCalendar" src="popUpCalendar.ascx"%> <%@ Page language="c#" Codebehind="dispCalendar.aspx.cs" AutoEventWireup="false" Inherits="CalendarExample.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <sk:popupcalendar id="myCalendar" runat="server"></sk:popupcalendar> <table> <tr> <td width="75"> Select Date: </td> <td> <asp:TextBox id="txtStartDate" runat="server" Width="86px"></asp:TextBox> </td> <td> <asp:ImageButton id="Button1" runat="server" ImageUrl="calendar.gif"></asp:ImageButton> </td> </tr> </table> </form> </body> </HTML> 对应的codebehind文件如下(dispCalendar.aspx.cs): using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; namespace CalendarExample { /// <summary> /// WebForm1 的摘要说明。 /// </summary> public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.TextBox txtStartDate; protected System.Web.UI.WebControls.ImageButton Button1; protected popUpCalendar myCalendar; private void Page_Load(object sender, System.EventArgs e) { if (!IsPostBack) myCalendar.hideCalendar();// 在此处放置用户代码以初始化页面 } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN:该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Button1.Click += new System.Web.UI.ImageClickEventHandler(this.Button1_Click); this.Load += new System.EventHandler(this.Page_Load); } #endregion private void Button1_Click(object sender, System.Web.UI.ImageClickEventArgs e) { DateTime dSelDate; try { dSelDate=DateTime.Parse(txtStartDate.Text); } catch { dSelDate=DateTime.Now; } myCalendar.displayCalendar("Select a start date", dSelDate,"txtStartDate", 22, 215); } } } |
| webasp.net |