® IBM Software Group © 2006 IBM Corporation Using JSF Mini-Calendar Controls This section describes how to use a JSF Mini-Calendar Control with EGL It also shows how to use JavaScript to modify values at run-time. Note that there are a few steps that, for the release were necessary, but for future releases may not be. We have documented these steps inside this section.

2 Last update: 12/04/2007 JSF Mini-Calendar Controls You may want to use JSF mini-calendar components (see page below) in your application – as a central visual motif. Here’s a simple page that contains a JSF Mini-Calendar that allows users to :  Select a date  Upon selection, that calendar-date value is copied (via JavaScript) to an input field  And then upon the user hitting Enter (form submit), the value is used in EGL logic Input field, valued via JavaScript JSFMini-CalendarControl JSF Error Messages component

3 Last update: 12/04/2007 Create the Page – 1 of 4  From Project Explorer, create a.JSP page named: miniCalendarPage.jsp   Change the page header text  Add a JSF Select - Calendar component  From the next slide, create the JSFHandler code…

4 Last update: 12/04/2007 Create the JSFHandler – 2 of 4  From the Notes section below, copy the JSFHandler source over (completely replace the existing) boiler-plate code.  Note the following:  Dates – with dateFormat specified – Note that this is necessary for this release  The date2 field specified as allowing nulls – to display as a blank on-screen  Setting the date2 field to null  Displaying the selected date as a string, which is formatted using an EGL built-in function Save your code

5 Last update: 12/04/2007 Customize the Mini-Calendar – 3 of 4  From Page Designer / From Page Data:  Drag and drop date1 on top of the Calendar –From the Calendar’s properties, specify a custom Date Pattern  *** With the Calendar selected, from source mode, add the single line shown here – into the calendar’s JSF properties 

6 Last update: 12/04/2007 Create the Page – 4 of 4 – Add the JavaScript and Finish the Page  With the Calendar selected, from the QuickEdit view, add the following statement (shown below) to the onchange function.  Note this will make the value of the date2 field, equal to what is selected in the Mini-Calendar.  Finally, from Page Data:  Drag and drop date2 on the page – and make it an input field  From Options – de-select the command buttons  Ensure that an ErrorMessages control is placed on the field  Drag and drop the showTheDate function on the page, where it will become a Submit Button document.getElementById('form1:textDate21').value = thisObj.value;

7 Last update: 12/04/2007 Run The Page on the Server Run the page on the server Select a date Note that this will populate the empty input field Click the Submit Button Input field, valued via JavaScript JSFMini-CalendarControl JSF Error Messages component