Thursday, December 11, 2008

How to replace the default APEX calendar with jQuery calendar...


One of the things I talked about during my presentations at OOW and UKOUG is how to replace the (not so good looking) default APEX calendar with a (much nicer) jQuery version. So here are the steps:
1. Download jQuery and jQuery UI from the jQuery website. Upload the jQuery javascript files to your webserver (or into your database if you are using the EPG). Or use GoogleCode...
2. Create a HTML Region on Page 0, containing the references to the uploaded stylesheets and javascript files. Something like this:

3. Set the "Display as" property of the date fields to 'Text Field" and set the "HTML Form Element Attributes" to : class="datefield".
4. Back in Page 0, add a function to the jQuery 'document ready' function to add the jQuery datepicker to all fields with that class:
5. Run your page and see the results. It should something like the picture on top. I created - a very small - 'running' demo on apex.oracle.com.

Update: In FF all works great, but in IE6 and IE7 the vertical position of the calendar DIV seems to be calculated wrong (using jQuery 1.2.6). Probably a bug in the jQuery lib...
Post a Comment