Problem with a calendar control

Jackpanel · July 29, 2004

I'm working on a pop-up calendar control that will eventually open up in a centered layer. The goal is to make it similar to a modal window, but all in one browser window instead of opening the calendar in a new popup window.

I have a read-only textbox with a little calendar icon next to it, which makes the calendar DIV visible when clicked. The user then selects their date, presses Accept and it hides the DIV and fills the textbox. This works perfectly the first time a user tries it.

My problem is that if the user opens the calendar again, then no matter what the click on, it it triggering the btnAccept_click or btnCancel_click events and closing the DIV without updating the textbox. It won't allow the user to change months, because it closes as soon as the NextMonth button is pressed.

You can view the sample here:

http://edtweb01dev411.edthosting.com/om/member/test.aspx

Use Test as both the email and login to access the page. Click the calendar, pick a date, then choose accept. Works fine, right? Now try it again without reloading and see the problem.

Code is as follows:

Test.aspx

<%@Register tagprefix="OM" Tagname="calendar" src="~/Resource/TestCalendar.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TEST.aspx.vb" Inherits="TEST"%>
<%= "<script language='JavaScript' src='" & Application("Root") & "/Resource/Global/common.js'></script>" %>
<%= "<link href='" & Application("Root") & "/Resource/style1.css' type='text/css' rel='stylesheet'>" %>
<%= "<link href='" & Application("Root") & "/Resource/style1-print.css' type='text/css' rel='stylesheet'>" %>

<script>
function init(){
	divCalendar.style.left = CenterLeft - 70
	divCalendar.style.top = CenterTop - 150
}
</script>
<body onload="init()">
<form id="OpportunityForm" method="post" runat="server">
	<asp:textbox id="lblSubmissionDue" runat="server" ReadOnly="true" type="text" cssclass="details-alt1-input"></asp:textbox>
	<IMG alt="" src="../images/calendar.gif" onclick="javascript:show('divCalendar')">
	<div id="divCalendar" class="calendar"><OM:calendar runat="server" id="objCalendar"/></div>
</form>
</body>

Test.aspx.vb

Public Class TEST
   Inherits System.Web.UI.Page

   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   End Sub

End Class

TestCalendar.aspx

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="TESTCalendar.ascx.vb" Inherits="TESTCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<asp:panel id="pnlCalendar" runat="server">
<TABLE borderColor="black" cellSpacing="0" cellPadding="0" border="1">
	<TR>
		<TD>
			<TABLE borderColor="white" cellSpacing="0" cellPadding="0" border="5">
				<TR>
					<TD>
						<asp:Calendar id="Calendar1" runat="server" PrevMonthText="<<" NextMonthText=">>" Width="200px" Height="150px" BorderColor="Black" BackColor="#EFEFE0" OnSelectionChanged="Calendar1_SelectionChanged" Font-Names="Arial" Font-Size="X-Small">
							<SelectorStyle font-bold="True" forecolor="Navy" backcolor="Navy"></SelectorStyle>
							<NextPrevStyle forecolor="White" backcolor="#293473"></NextPrevStyle>
							<DayHeaderStyle font-bold="True"></DayHeaderStyle>
							<SelectedDayStyle font-bold="True" forecolor="White" backcolor="#293473"></SelectedDayStyle>
							<TitleStyle font-bold="True" forecolor="White" backcolor="#293473"></TitleStyle>
							<OtherMonthDayStyle font-italic="True" backcolor="#BFC5E1"></OtherMonthDayStyle>
						</asp:Calendar>
						<asp:ImageButton id="imgAccept" runat="server" ImageUrl="~/images/accept.gif"></asp:ImageButton>
						<asp:ImageButton id="imgCancel" runat="server" ImageUrl="~/images/cancel.gif"></asp:ImageButton>
						<asp:literal id="Literal1" runat="server"></asp:literal></TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
</TABLE>
</asp:panel>

TestCalendar.aspx.vb

Public MustInherit Class TESTCalendar
   Inherits System.Web.UI.UserControl
   Protected WithEvents Calendar1 As System.Web.UI.WebControls.Calendar
   Protected WithEvents imgAccept As System.Web.UI.WebControls.ImageButton
   Protected WithEvents imgCancel As System.Web.UI.WebControls.ImageButton
   Protected WithEvents pnlCalendar As System.Web.UI.WebControls.Panel
   Protected WithEvents Literal1 As System.Web.UI.WebControls.Literal

   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

   End Sub

   Public Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)

   End Sub

   Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
       If e.Day.Date = DateTime.Now().ToString("d") Then
           e.Cell.BackColor = System.Drawing.Color.LightGray
       End If
   End Sub

   Private Sub imgAccept_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgAccept.Click
       Dim strjscript As String = "<script language=""javascript"">"
       strjscript = strjscript & "OpportunityForm.lblSubmissionDue.value='" & Format$(Calendar1.SelectedDate, "MMMM d, yyyy") & "';hide('divCalendar')" 
       strjscript = strjscript & "</script" & ">" 
       Literal1.Text = strjscript
   End Sub

   Private Sub imgCancel_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgCancel.Click
       Dim strjscript As String = "<script language=""javascript"">"
       strjscript = strjscript & "hide('divCalendar')" 
       strjscript = strjscript & "</script" & ">" 
       Literal1.Text = strjscript
   End Sub
End Class

bri189a · July 29, 2004

I can't even get the page to load correctly because of JavaScript errors (left is not defined).

Jackpanel · July 29, 2004

I can't even get the page to load correctly because of JavaScript errors (left is not defined).

Oops, I forgot to update the application root. It was pointing to a local javascript. It should be fixed now.

Doing a bit more investigating, the problem seems to be that the literal is storing the javascript command to hide the window whenever the Accept or Cancel buttons are used. I could partially fix it by resetting the literal to a blank script in the Calendar1_SelectionChanged section, but it wasn't triggering when a user was changing months.

What I need to do is clear out the literal every time it fires so that it doesn't fire again the next time the form is submitted. I'm just not sure where exactly I can do this.

Sign In

Problem with a calendar control

Recommended Posts

Jackpanel

bri189a

Jackpanel

Join the conversation

Browse

Activity