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 III-4 : Page 4


advertisement
Populating the Calendar
We now need to figure out the name of the modified text box (or tbm variable used by the calendar ASP page) as well as the name of the SPAN tag under which we need to position the calendar DIV tag. Because there are four separate drop-down calendar triggers on the page all using the same single drop-down calendar, we need a way to know which date text box invoked the calendar. We do this by passing an argument to the "DropCalendar" function when the appropriate graphic is clicked. Use this code to set some values to the variables based on the argument passed in:

// assign field name to variable // based on argument if(i==1) { tbm='frmEntry.pebd'; theSpan = 'spanPEBD'; } if(i==2) { tbm='frmEntry.peed'; theSpan = 'spanPEED'; } if(i==3) { tbm='frmEntry.pabd'; theSpan = 'spanPABD'; } if(i==4) { tbm='frmEntry.paed'; theSpan = 'spanPAED'; }

Now assign values to some more variables to ease its use within the code:

SpanBox = document.all[theSpan]; CalBox = document.all['popCal']; CalFrame = document.all['CalFrame'];

Finally, position the Calendar DIV tag (the object within the CalBox variable) so that it uses the same "left" position as the SPAN tag (the object within the SpanBox variable) positioned just below it:


// Position CalBox.style.left = SpanBox.offsetLeft; CalBox.style.top = SpanBox.offsetTop + SpanBox.offsetHeight + 2;

Now populate the source for the calendar within the Calendar DIV tag. Remember, the calendar ASP page requires you to provide the correct text-box-to-modify argument as a Querystring value. Use this code:

// Update the Source within it CalFrame.src = 'calpopd.asp?tbm='+tbm;

And our pièce de résistance, making the calendar control visible:

// Make it visible CalBox.style.display='';

The calendar control appears like magic when the user clicks on one of the drop-down calendar graphics.

I urge you to download the complete source code for this month's article and experiment with it.



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