Implement the calendar instance program in ASP. NET

Full. net implement pop-up calendar

The code is as follows:

Copy code

<% @ 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 = "" 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

The code is as follows:

Copy 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> /// Summary of 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. Tow.datestring (); 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 ()");   } # Code generated by region Web form designer Override protected void OnInit (EventArgs e)   { // // CODEGEN: This call is required by the ASP. NET Web form designer. // InitializeComponent (); Base. OnInit (e );   } /// <Summary> /// The designer supports the required methods-do not use the code editor /// Modify the content of this method. /// </Summary> Private void InitializeComponent ()   { This. Calendar1.SelectionChanged + = new System. EventHandler (this. Calendar#selectionchanged ); This. Load + = new System. EventHandler (this. Page_Load );   } # Endregion # Events selected by region calendar Private void calendar#selectionchanged (object sender, System. EventArgs e)   { This. TextBox1.Text = Calendar1.SelectedDate. Tow.datestring (); This. pnlCalendar. Attributes. Add ("style", "DISPLAY: none; POSITION: absolute ");   } # Endregion  } }

Now, the following result is a calendar pop-up by js +. net.

On the page for date selection, place two TEXTBOX and BUTTON to select the start time and end time, and add the following javascript statement before the html code </body>:

 

The code is as follows:

Copy code

<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 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:

 

The code is as follows:	Copy code
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:

The code is as follows:	Copy code
<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:
 

The code is as follows:	Copy code
<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.