In recent projects, calendar selection has been used. Considering the page refreshing and the passing of values on multiple control pages, you have decided to write a recommended and practical pop-up calendar Selection Control for future calls. The specific implementation is as follows:
On the page for date selection, place two textbox and button to select the start time and end time.CodeBefore adding the following JavaScript statement:
The preceding statements define two modal dialogs. When the modal dialog box is called, The calendarform2.aspx page is displayed to select a date. The form on this page is named form1, the two textbox receive the two time values passed in separately and they should not affect each other. Note that the form definition in HTML should correspond to the definition in JavaScript and should be run on the server, for example, <Form ID = "form1" method = "Post" runat = "server">.
In the webform1.aspx. CS code section of this page, load the page_load event and add the following statement to assign the Javascript behavior defined to the button:
Buttonbegindate. Attributes. Add ("onclick", "openmodebegin ()");
Buttonenddate. Attributes. Add ("onclick", "openmodeend ()");
Calendarform2.aspx is a temporary container. It provides a framework to call the content of calendarform3.aspx, so that the value cannot be uploaded after the date selection form is disabled. The following statement should be added between its HTML head mark:
<SCRIPT id = "clienteventhandlersjs" Language = "JavaScript">
<! --
Function iframe1_onblur (){}
// -->
</SCRIPT>
No code is required in the calendarform2.aspx. CS file. You only need to add the following code between the body tags:
<Body runat = "server" id = "body1">
<Form ID = "form1" method = "Post" runat = "server">
<IFRAME frameborder = "no" src = 'calendarform3. aspx 'style = "width: 480px; Height: pixel PX" id = "iframe1"
Language = "JavaScript" onblur = "Return iframe1_onblur ()"> </iframe>
</Form>
</Body>
Calendarform3.aspx the date selection page we actually use contains a calendar control and a button and a textbox. Here, it is easier to directly pass the selected value of the calendar control calendar to webform1.aspx on the first page, however, we did not do this. If we do not directly pass the value, we mainly take into account the usage habits of most users. Here, we will pass the selected value of the calendar control to the textbox on the page, press the button, and then pass it to webform1.aspx, it can also be easily corrected after the user misselects.
The HTML code of calendarform3.aspx is as follows. Here is just an example of making it visually appealing after adjustment. You do not need to use the following code:
<HTML>
<Head>
<Title> date selection form </title>
<Meta content = "Microsoft Visual Studio. NET 7.1" name = "generator">
<Meta content = "JavaScript" name = "vs_defaultclientscript">
<Meta content = "http://schemas.microsoft.com/intellisense/ie5" name = "vs_targetschema">
</Head>
<Body id = "mybody" runat = "server" ms_positioning = "gridlayout">
<Form ID = "form1" method = "Post" runat = "server">
<Asp: Calendar id = "calendar1" style = "Z-INDEX: 101; left: 32px; position: absolute; top: 16px" runat = "server"
Height = "390px" width = "440px" borderwidth = "1px" backcolor = "# ffffcc" daynameformat = "full" forecolor = "#663399"
Font-size = "8pt" font-names = "verdana" bordercolor = "# ffcc66" showgridlines = "true" prevmonthtext = "last month & amp; lt ;"
Nextmonthtext = "next month & amp; gt;">
<Todaydaystyle forecolor = "#00c000" backcolor = "khaki"> </todaydaystyle>
<Selectorstyle backcolor = "# ffcc66"> </selectorstyle>
<Nextprevstyle font-size = "9pt" forecolor = "# ffffcc"> </nextprevstyle>
<Dayheaderstyle Height = "1px" backcolor = "# ffcc66"> </dayheaderstyle>
<Selecteddaystyle font-bold = "true" backcolor = "mediumpurple"> </selecteddaystyle>
<Titlestyle font-size = "9pt" font-bold = "true" forecolor = "# ffffcc" backcolor = "#990000"> </titlestyle>
<Othermonthdaystyle forecolor = "# cc9966"> </othermonthdaystyle>
</ASP: Calendar>
<Asp: textbox id = "textbox1" style = "Z-INDEX: 102; left: 32px; position: absolute; top: 416px" runat = "server"
Visible = "false"> </ASP: textbox>
<Asp: button id = "button1" style = "Z-INDEX: 103; left: 216px; position: absolute; top: 412px" runat = "server"
TEXT = "Confirm" bordercolor = "steelblue" forecolor = "white" backcolor = "steelblue" width = "81px"
Height = "30px"> </ASP: button> </form>
</Body>
</Html>
Add the following two statements to the calendarform3.aspx. CS code to complete the value transfer:
Private void calendar#selectionchanged (Object sender, system. eventargs E)
{
Textbox1.text = calendar1.selecteddate. tolongdatestring ();
}
Private void button#click (Object sender, system. eventargs E)
{
Response. Write ("<script language = JavaScript> window. returnvalue = '" + textbox1.text + "'; window. Close (); </SCRIPT> ");
}
Since then, the complete date selection can be completed, and the two pages of calendarform2.calendarform3 can be accessed repeatedly. To call other pages, you only need to add the first JavaScript code in the beginning of this article to HTML.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
