18.2. How to use the calendar within dbforms

To use it, application developers have to do following steps:

  1. Copy the directory dbformslib with all subdirectories into the root of the web application. This directory can be found within directory dist inside DbForms distribution.

  2. See Javadoc for class java.text.SimpleDateFormat to find more information about supported formats and date patterns. Be aware that the pattern is case sensitive and that lowercase 'm' does not mean 'month' but 'minute'. The format handling inside the JavaScript calendar is separated from the handling inside dbforms Java code. And unfortunately the meaning of subpatterns is somtimes different in both worlds. E.g. 'mm' means 'minute' in Java patterns and '1 or 2 digit month' for the calendar. For the beginning it is recommended to build a pattern out of the following subpatterns:

    • 'dd': two digit day of month
    • 'MM': two digit month of year (uppercase!)

    • 'yyyy': 4 digit year

    As separator you may use '.','-','_' or '/'. Examples of valid patterns are 'yyyy-MM-dd', 'dd.MM.yyyy', 'MM/dd/yyyy'. Such patterns should be understood and handled by the calendar and the dbforms Java code in the same way. See next subsection about how to add support for more date formats.

  3. Include the JavaScript file calendar.js containing the calendar application in your JSPs:

    <script language="javascript" src="dbformslib/jscal/calendar.js\"> </script>

    If you have JSPs within subdirectories, you can use an absolute path with your context path included in pathname:

    <script language="javascript" src="/contextpath/dbformslib/jscal/calendar.js" > </script>

    If you want to avoid to write context path into your pages and want pages still to work also within subdirectories, you may write instead the following version, which looks a bit more complicated, but will work whereever you copy your pages:

    <script language="javascript" src=<%= "\"" +request.getContextPath() + "/dbformslib/jscal/calendar.js\""%> > </script>

  4. To activate the calendar for a date field, all you have to do is to set the attribute useJsCalendar to "true" :

    <db:dateField fieldName="birthdate" useJsCalendar="true" />

    When running the application, a small calendar icon will be shown after the date field:

    If user clicks on the icon (and has JavaScript activated), a popup window appears showing a calendar. User can navigate to the desired month and then simply click on the date. That selected date will be written into the form field.