Asp. NET in the implementation of pop-up calendar example _ Practical Tips

There are a number of ways to pop up calendars in. NET, where you can use the. NET example directly, and of course we could use the JS date example. Oh, I'll give you a simple two examples below. A friend in need can understand.

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 Body" 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;
 A brief description of the <summary>///Ctlcalendar.  </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 (" +th  is.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 the code generated by the Web Forms Designer override protected void OnInit (EventArgs e) {////CODEGEN: This call is required for the ASP.net Web Forms Designer.
  InitializeComponent (); Base.
 OnInit (e);
 ///<summary>///Designer supports the desired method-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); The event private void Calendar1_SelectionChanged (object sender, System.ev when #endregion #region Calendar selectionEntargs e) {this.
  TextBox1.Text = Calendar1.SelectedDate.ToShortDateString (); THIS.PNLCALENDAR.ATTRIBUTES.ADD ("Style", "display:none;
 Position:absolute ");
 } #endregion}}

Okay, here's the result. Js+.net Implementation Popup Calendar

Place two TextBox and button on the page you want to call the date to select the start and end times, and add the following before the </body> of the HTML code

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 dialogs, and when the modal dialog box is invoked, the Calendarform2.aspx page selection date is opened, and the form name of this page is called Form1, and the two textbox receives the two time values that are passed in and should be able to do so independently. Note that the form definition in HTML should correspond to the definitions defined in JavaScript and should be run on the server side, such as <form id= "Form1" method= "POST" runat= "Server" >.

In this page WebForm1.aspx.cs the code part of the page load Page_Load event add the following statement to assign the defined JavaScript behavior to the button:

BUTTONBEGINDATE.ATTRIBUTES.ADD ("onclick", "Openmodebegin ()"); 
  BUTTONENDDATE.ATTRIBUTES.ADD ("onclick", "Openmodeend ()");

Calendarform2.aspx is a temporary container that provides the contents of the framework invoke calendarform3.aspx, in case the date selection form cannot complete the pass value, and 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 we actually use the date selection page contains a Calendar control and a button for a textbox where you directly pass the selected values of Calendar control calendars to the first page WebForm1.aspx simpler, but we didn't do that, not directly transmitted values are mainly Taking into account the use of most users, this will be the value of the Calendar control selected to the TextBox on the page, press the button and then passed to WebForm1.aspx, can also be easily corrected after the user mistakenly selected.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.