Implementation of pop up calendar example in ASP. NET

There are many ways to pop up calendars in. net. Here, we introduce the direct use of. net as an example. Of course, we can also use js calendars as an example. Let me give two simple examples respectively. Friends in need can know 1.

The code is as follows:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="ctlCalendar.ascx.cs" Inherits="calendar.ctlCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" enableViewState="True"%>
<asp:textbox id="TextBox1" runat="server"></asp:textbox>
<input type="button" id="Button1" runat="server" value="..."><br>
<asp:Panel id="pnlCalendar" runat="server" style="POSITION: absolute">
 <asp:calendar id="Calendar1" runat="server" FirstDayOfWeek="Monday" ShowGridLines="True" BackColor="White"
 DayNameFormat="Full" ForeColor="Black" Font-Size="8pt" Font-Names="Verdana" BorderColor="#999999"
 CellPadding="4" Width="200px" Height="180px">
 <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle>
 <SelectorStyle BackColor="#CCCCCC"></SelectorStyle>
 <DayStyle Wrap="False" BorderStyle="Dashed"></DayStyle>
 <NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>
 <DayHeaderStyle Font-Size="X-Small" Font-Names=" Song Style " Wrap="False" BorderStyle="Dashed" BackColor="#CCCCCC"></DayHeaderStyle>
 <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666"></SelectedDayStyle>
 <TitleStyle Font-Size="Small" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BackColor="#999999"></TitleStyle>
 <WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>
 <OtherMonthDayStyle ForeColor="Gray"></OtherMonthDayStyle>
 </asp:calendar>
</asp:Panel>

cs code

namespace calendar
{
 using System;
 using System.Data;
 using System.Drawing;
 using System.Web;
 using System.Web.UI.WebControls;
 using System.Web.UI.HtmlControls;
 /// <summary>
 /// ctlCalendar  A summary description of. 
 /// </summary>
 public class ctlCalendar : System.Web.UI.UserControl
 {
 protected System.Web.UI.WebControls.TextBox TextBox1;
 protected System.Web.UI.WebControls.Panel pnlCalendar;
 protected System.Web.UI.HtmlControls.HtmlInputButton Button1;
 protected System.Web.UI.WebControls.Calendar Calendar1;
 private void Page_Load(object sender, System.EventArgs e)
 {
  //  Place user code here to initialize the page 
  if (!Page.IsPostBack)
  {
  this.TextBox1.Text = System.DateTime.Now.ToShortDateString();
  this.pnlCalendar.Attributes.Add("style","DISPLAY: none; POSITION: absolute");
  }
  else
  {
  string id = Page.Request.Form["__EVENTTARGET"].Substring(0,Page.Request.Form["__EVENTTARGET"].IndexOf(":"));
  if (id != this.ID) 
  {
   this.pnlCalendar.Attributes.Add("style","DISPLAY: none; POSITION: absolute");
  }
  else
  {
   this.pnlCalendar.Attributes.Add("style","POSITION: absolute");
  }
  }
  Page.RegisterClientScriptBlock("Script_Panel" + this.ID,
  "<script> function On"+this.ID+"Click() { if("+this.ID+
"_pnlCalendar.style.display == "none")   "+this.ID+
"_pnlCalendar.style.display = "";  else  "+this.ID+
"_pnlCalendar.style.display = "none"; } </script>");  
  this.Button1.Attributes.Add("OnClick","On"+this.ID+"Click()");
 }
 #region Web  Code Generated by Form Designer 
 override protected void OnInit(EventArgs e)
 {
  //
  // CODEGEN:  The call is  ASP.NET Web  Required by the form designer. 
  //
  InitializeComponent();
  base.OnInit(e);
 }
 /// <summary>
 ///  Designer supports the required methods  -  Do not use the code editor 
 ///  Modify the contents of this method. 
 /// </summary>
 private void InitializeComponent()
 {
  this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
  this.Load += new System.EventHandler(this.Page_Load);
 }
 #endregion
 #region  Events when calendars are selected 
 private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
 {
  this.TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();
  this.pnlCalendar.Attributes.Add("style","DISPLAY: none; POSITION: absolute");
 }
 #endregion
 }
}

Ok, the following result js +. net realizes pop-up calendar

Place two TEXTBOX and BUTTON on the page that needs to call the date selection to select the start time and end time, and put them in the html code < /body > Insert the following before

javascript statement:

<script language="javascript"> 
   function openModeBegin() 
   { 
   var returnValue=window.showModalDialog("CalendarForm2.aspx",Form1.TextBoxBeginDate.value);
   Form1.TextBoxBeginDate.value=returnValue; 
   } 
 </script> 
 <script language="javascript"> 
   function openModeEnd() 
   { 
   var returnValue=window.showModalDialog("CalendarForm2.aspx",Form1.TextBoxEndDate.value); 
   Form1.TextBoxEndDate.value=returnValue; 
   } 
 </script>

The above statement defines two modal dialog boxes. When calling the modal dialog box, open the CalendarForm2.aspx page to select the date. The name of the form FORM on this page is Form1. The two TextBox receive the two time values passed in respectively and should not affect each other. Note that the form definition in html should correspond to that in javascript and should run on the server side, as shown in < form id="Form1" method="post" runat="server" > .

Add the following statement in the Load Page_Load event on the WebForm1.aspx. cs code section of this page to assign the defined javascript behavior to Button:

ButtonBeginDate.Attributes.Add("onclick", "openModeBegin()"); 
  ButtonEndDate.Attributes.Add("onclick", "openModeEnd()");

CalendarForm2.aspx is a temporary container that provides the framework to call CalendarForm3.aspx in case the date selection form cannot be passed after closing. The following statement should be added between the Head tags of its html:

The code is as follows:

<script id="clientEventHandlersJS" language="javascript"> 
<!-- 
function IFRAME1_onblur() {} 
//--> 
 </script>

There is no need to write any code in the CalendarForm2. aspx. cs file, just add the following code between the body tags:

The code is as follows:

<body runat="server" ID="Body1"> 
 <form id="Form1" method="post" runat="server"> 
  <iframe frameborder="no" src='CalendarForm3.aspx' style="WIDTH: 480px; HEIGHT: 450px" id="IFRAME1" 
  language="javascript" onblur="return IFRAME1_onblur()"></iframe> 
 </form> 
</body>

CalendarForm3. aspx the date selection page we actually use contains 1 calendar control and 1 Button1 TextBox, Here, it is simpler to directly pass the selected value of calendar control Calendar to the first page WebForm1.aspx, but we did not do so. The main reason for not passing the value directly is to consider the usage habits of most users. Here, the selected value of calendar control is passed to TextBox on the page, and then passed to WebForm1.aspx after pressing Button, which can be easily corrected after the user misselects it.