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:
There is a lot to digest here. If you are confused about any of this, look at the demo project and satisfy yourself how everything goes together by looking at the page source there.
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