自定义日历控件(Calendar)

最新推荐文章于 2025-01-16 15:48:37 发布

原创最新推荐文章于 2025-01-16 15:48:37 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#calendar #日历 #webform #string #textbox #javascript

ASP.NET 专栏收录该内容

92 篇文章

订阅专栏

本文介绍如何创建并使用一个自定义的日历用户控件。该控件采用C#编写，能够实现弹出显示、日期选择等功能，并可以轻松地集成到网页中。

1.先写一个用户控件：

HTML：

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="RhombusCalendar.ascx.cs" Inherits="Rhombus2.RhombusCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>

<asp:Panel id="calendarPanel" Height="176px" Width="192px" runat="server" BackColor="White">

<asp:Calendar id="Calendar1" runat="server" PrevMonthText="<img src='../../image/monthleft.gif' border=0>"

NextMonthText="<img src='../../Image/monthright.gif' border=0>"></asp:Calendar>

</asp:Panel>

var count = document.all.length;

var i;

for(i=0;i<count;i++)

{

if(document.all(i).tagName == "DIV")

{

var calendarPanelId = document.all(i).id;

if(calendarPanelId.lastIndexOf("_calendarPanel") != -1)

{

document.all(i).style.display="none";

}

</script>

.CS

namespace Rhombus2
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;

/// <summary>
///  Summary description for RhombusCalendar.
/// </summary>
public class RhombusCalendar : System.Web.UI.UserControl
{
  protected System.Web.UI.WebControls.Calendar Calendar1;
  private static string selectedDate = "";
  protected System.Web.UI.WebControls.Panel calendarPanel;
  private static string inputDate;

  private void Page_Load(object sender, System.EventArgs e)
  {
   // Put user code to initialize the page here
   //if(!IsPostBack)
   {
    calendarPanel.Visible = false;
   }

}

  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: This call is required by the ASP.NET Web Form Designer.
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  ///  Required method for Designer support - do not modify
  ///  the contents of this method with the code editor.
  /// </summary>
  private void InitializeComponent()
  {
   this.Calendar1.VisibleMonthChanged += new System.Web.UI.WebControls.MonthChangedEventHandler(this.Calendar1_VisibleMonthChanged);
   this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
   this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

  private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
  {
   string dateFormat = "yyyy-M-dd";
   if(dateFormat==""||dateFormat==null ) dateFormat="yyyy-M-dd";//use default.
   selectedDate = Calendar1.SelectedDate.ToString(dateFormat);
   calendarPanel.Visible = false;
   TextBox txtBox = (TextBox)this.Parent.FindControl(inputDate);
   txtBox.Text = selectedDate;

}

  public void SetTextBox(string txtBoxId)
  {
   inputDate = txtBoxId;

}

  private void Calendar1_VisibleMonthChanged(object sender, System.Web.UI.WebControls.MonthChangedEventArgs e)
  {
   calendarPanel.Visible = true;
  }

  public bool pVisible
  {
   get{return calendarPanel.Visible;}
   set{calendarPanel.Visible = value;}

}

  public string pLayerOrder
  {
   set{calendarPanel.Style["z-index"] = value;}
  }

  public string pPosition
  {
   set{calendarPanel.Style["position"] = value;}
  }

  public string pTop
  {
   get{return calendarPanel.Style["top"];}
   set{calendarPanel.Style["top"] = value;}
  }

  public string pLeft
  {
   get{return calendarPanel.Style["left"];}
   set{calendarPanel.Style["left"] = value;}
  }

}
}
2.把用户控件插入需要用的页面里面,最好放入TABLE:

HTML:

<%@ Register TagPrefix="uc1" TagName="RhombusCalendar" Src="RhombusCalendar.ascx" %>

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplicationTest.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 176px; WIDTH: 313px; POSITION: absolute; TOP: 72px; HEIGHT: 88px"

cellSpacing="1" cellPadding="1" width="313" border="1">

<TR>

<TD>

<asp:TextBox id="txt_customerRequestDateFrom" runat="server"></asp:TextBox></TD>

<td>

<asp:Button id="btn_customerRequestDateFrom" runat="server" Text="Button"></asp:Button></td>

</TR>

<TR>

<td>

<uc1:RhombusCalendar id="CalendarCustReqDateFrom" runat="server"></uc1:RhombusCalendar></td>

</TR>

</TABLE>

</form>

</body>

</HTML>

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

using Rhombus2;

namespace WebApplicationTest

{

///<summary>

/// Summary description for WebForm1.

///</summary>

public class WebForm1 : System.Web.UI.Page

{

protected System.Web.UI.WebControls.TextBox txt_customerRequestDateFrom;

protected RhombusCalendar rhombusCalendar;

protected System.Web.UI.WebControls.Button btn_customerRequestDateFrom;

private static int i = 400;

private void Page_Load(object sender, System.EventArgs e)

{

// Put user code to initialize the page here

}

#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

{

// CODEGEN: This call is required by the ASP.NET Web Form Designer.

InitializeComponent();

base.OnInit(e);

}

///<summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

///</summary>

private void InitializeComponent()

{

this.btn_customerRequestDateFrom.Click += new System.EventHandler(this.btn_customerRequestDateFrom_Click);

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

private void btn_customerRequestDateFrom_Click(object sender, System.EventArgs e)

{

rhombusCalendar = (RhombusCalendar)this.FindControl("CalendarCustReqDateFrom");

rhombusCalendar.SetTextBox(txt_customerRequestDateFrom.ID);

rhombusCalendar.pPosition = "absolute";

rhombusCalendar.pTop = "javascript:getX(btn_customerRequestDateFrom)";

rhombusCalendar.pLeft = "javascript:getY(btn_customerRequestDateFrom)";

rhombusCalendar.pLayerOrder = "auto";

rhombusCalendar.pVisible = true;

i++;

rhombusCalendar.pLayerOrder = i.ToString();

}