Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Simplifying Date Data Entry, Part II-3 : Page 3


advertisement
Getting the Date Straight
We need to account for the new information being passed to us in calpop.asp, as well as update the hyperlink on each calendar day so it will update the correct text field.

To do this, use ASP to write some dynamic JavaScript. For instance, if you want to update the text box field "pebd" contained within the form "frmEntry" of the parent window to a value equal to 12/28/2000; you would use the following code:

opener.frmEntry.pebd.value = '12/28/2000';

This causes the text box field in the parent—referred to as the "opener" within the child document—to be updated to the specified value. In this case, the field name is a variable in the Request object, the day is the hyperlink clicked on, while the month and the year are calculated within the ASP page prior to rendering a calendar.



The current code to display a hyperlink for the day is as follows:

Sub WriteActiveCalDay(byval sLabel) Response.Write "<TD WIDTH=""20"" ALIGN=""CENTER"" VALIGN=""TOP""> <A HREF=""BLAH"">" & sLabel & "</A></TD>" & vbCrLf End Sub

When executed, this produces the following HTML code for the first day of the month:

<TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP"> <A HREF="BLAH">1</A></TD>

To get the hyperlink for a given day to call a JavaScript function instead of the current "BLAH", change the code as follows:

Sub WriteActiveCalDay(byval sLabel) Response.Write "<TD WIDTH=""20"" ALIGN=""CENTER"" VALIGN=""TOP""> <A HREF=""javascript:SetDateValue(" & Cint(sLabel) & ");"">" & sLabel & "</A> </TD>" & vbCrLf End Sub

When executed, this produces the following HTML (for the first day of the month):

<TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP"> <A HREF="javascript:SetDateValue(1);">1</A></TD>

The hyperlink for each day passes in its unique data value by invoking the same JavaScript routine, "SetDateValue."

The following JavaScript code-preferably in the section-- within calpop.asp defines the SetDateValue routine:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function SetDateValue(d) { } //--> </SCRIPT>

I now need to update the parent's date text field value within the function. Remember, the field name is updated via the Request Object and the current month and year is displayed via the ASP variables intM and intY. :

function SetDateValue(d) { opener.<%=Request("tbm")%>.value = '<%=intM %>/'+d+'/<%=intY %>'; }

When this code executes, the ASP script completes the JavaScript pieces. The output in this example is December 2000:

function SetDateValue(d) { opener.frmEntry.pebd.value = '12/'+d+'/2000'; }

The text "frmEntry.pebd in our client-side JavaScript is filled in via ASP with the correct value for the request "tbm." Similarly, ASP is responsible for filling in the 12 and the 2000, the values for intM and intY, respectively. Our example application is essentially finished. I can execute the page and invoke the pop-up calendar, click on any day, and find the proper date value input into the parent date text field.

There is one last "cleanup" function to take care of. The calendar pop-up needs to close down automatically after the user clicks on the date. This is easily accomplished using the "close" method of the window object —in this case, the "self" object—in JavaScript:

self.close();

To make the calpop.asp page work in all the months, instead of just the currently selected month, I need to pass the variable "tbm." I also need to program the "today" button to set the current date in the text box field. These tasks are done by modifying the hyperlinks for the previous and next image buttons and adding a new "SetTodayValue" function to the code:

Change the lines in the routine "WriteMonthNameTable" from:

<TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %>?m=<%= intMPrev %> &y=<%= intYPrev %>"><IMG SRC="calmLeft.gif" WIDTH="8" HEIGHT="12" ALT="Previous Month" BORDER="0"></A></TD> <TD WIDTH="176" ALIGN="CENTER" VALIGN="TOP"><STRONG> <%= MonthName(intM) & ", " & intY %></STRONG></TD> <TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %>?m=<%= intMNext %> &y=<%= intYNext %>"><IMG SRC="calmRight.gif" WIDTH="8" HEIGHT="12" ALT="Next Month" BORDER="0"></A></TD>

To the following (notice the new ?tbm=.. value):

<TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %> ?tbm=<%= Request("tbm") %>&m=<%= intMPrev %> &y=<%= intYPrev %>"><IMG SRC="calmLeft.gif" WIDTH="8" HEIGHT="12" ALT="Previous Month" BORDER="0"></A></TD> <TD WIDTH="176" ALIGN="CENTER" VALIGN="TOP"><STRONG> <%= MonthName(intM) & ", " & intY %></STRONG></TD> <TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %>?tbm= <%= Request("tbm") %>&m=<%= intMNext %> &y=<%= intYNext %>"><IMG SRC="calmRight.gif" WIDTH="8" HEIGHT="12" ALT="Next Month" BORDER="0"></A></TD>

And change the code in the routine WriteCalTableEnd from:

<TD COLSPAN="7" ALIGN="CENTER" VALIGN="TOP"> <FORM> <INPUT TYPE="BUTTON" NAME="B" VALUE="Today" STYLE="font-family: Tahoma; font-size: 8pt; width: 48px; height: 20px;"> </FORM></TD>

To the following (notice the call to the new JavaScript function):

<TD COLSPAN="7" ALIGN="CENTER" VALIGN="TOP"> <FORM> <INPUT TYPE="BUTTON" NAME="B" VALUE="Today" STYLE="font-family: Tahoma; font-size: 8pt; width: 48px; height: 20px;" ONCLICK="SetTodayValue()"> </FORM></TD>

Finally, create a new JavaScript routine:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function SetDateValue(d) { opener.<%=Request("tbm")%>.value = '<%=intM %>/'+d+'/<%=intY %>'; self.close(); } function SetTodayValue() { opener.<%=Request("tbm")%>.value = '<%=Month(Date) %> /<%= Day(Date) %>/<%= Year(Date) %>'; self.close(); } //--> </SCRIPT>

This sets the new function SetTodayValue with the current date using the VBScript Month, Day, and Year functions.

Eliminate Workarounds
The whole point of the two solutions in this series is to provide an alternative to manual data entry for date forms. Once you've built that functionality, it makes sense to force the use of the calpop window by locking out manual date entry in the parent form. The easiest way to do this is to set the text field as READONLY.

<INPUT TYPE="text" NAME="pebd" SIZE="15" MAXLENGTH="15" READONLY>

The user cannot manually change the value of the text box but the JavaScript code can change it via script. The READONLY technique is defined in HTML 4.0 and above and may not work in older browsers.

You now have a complete working application that ensures valid data entry for calendar dates and a great visual interface for your users.

You can view the entire application for this month's article as well as get your hands on the complete source code here.



Rama Ramachandran is the Vice President of Technology with Imperium Solutions and is a Microsoft Certified Solution Developer and Site Builder. He has extensive experience with building database systems and has co-authored several books including "Professional Visual InterDev 6 Programming" and "Professional Data Access" (Wrox). Rama teaches Visual Basic and Web development at Fairfield University and University of Connecticut.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date