That's about as far as you can take the popup with the WYSIWYG view of the page. You now have to use the source view to proceed:
- Switch to the source view of the page (JSP source tab at the bottom of the edit area).
- Inside the head section of the page, just after the line that says
- Add the lines:
- Some notes on this:
- The 'testdiv1' referenced in the CalendarPopup call is a DHTML DIV that we have yet to define. It is the actual popup DIV that will be revealed when the link is clicked.
- The form1:anchor attaches the popup to the anchor1 hyperlink on the page to give it the right position on the page.
- Finally, note the 'MM/dd/yyyy' format in the select call. This should match the DateTimeConverter format defined for the text area that the popup is attached to.
- The final step is to create the DIV that will be used for the popup, put this just before the closing body tag at the end of the document.
<link href="resources/stylesheet.css" rel="stylesheet" type="text/css"/>
Notes on this code:
Add Other Components
As a finishing touch, I added a submit button and a text output field with another date time converter on it that was bound to the same date field. That way, after a date is selected, and the submit button clicked, the selected date will be output on the screen, confirming that the whole thing works.
Run the Demo
Page 2 of 3