Saturday, June 7, 2008

Replacing Date Pickers

The default date pickers in ApEx are great. But there were two things I didn't like about them:

  1. They require a server side hit to generate.
  2. You have to click on the number inside the day. The entire day "square" does not work.

I spent some time looking and found a great jQuery plugin that solved both problems. It's called jQuery UI Datepicker and it was created by Mark Grabanski and Keith Wood. If you decide to use their product, although it's not required, you may want to consider making a donation. Information about their product can be found at the following URLs.

To view an example of the traditional ApEx date picker and jQuery UI Datepicker side by side, see the following example.

Here are some simple instructions on how to get it working in ApEx...

  1. Install jQuery in ApEx.
  2. Download ui.datepicker.css and ui.datepicker.js from here (under where it says "Use jQuery UI Datepicker"). Create a new folder called uidatepicker in your i/jquery directory (created in step 1) and copy both files into that location.
  3. Add a text item that you would like to serve as the date picker. If you are converting an old date picker, open the item and change its type to "TextField".
  4. Go to edit the page and enter the following in the HTML Header area:

    <link type="text/css" rel="stylesheet" href="i/jquery/uidatepicker/ui.datepicker.css" />
    <script type="text/javascript" src="i/jquery/uidatepicker/ui.datepicker.js"></script>
    <script type="text/javascript">
             dateFormat: 'dd-M-yy', 
             showOn: 'button',
             buttonImageOnly: true, 
             buttonText: '',
             buttonImage: '/i/asfdcldr.gif', 
             monthNamesShort: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']

    Note: make sure to replace "PXX_ITEM_NAME" with the correct item name.

That's it! Run the page and check it out.


  1. Hi Dan,

    I have followed your steps for installing jquery in APEX. I have the jquery directory in my /i/ folder & the two datepicker (css & js) files are in the uidatepicker subdirectory of jquery.

    I have copied the line of code into the template header for the jquery packed file. Also copied the lines into the HTML Header on the page and changed the item to the correct one. When I run the page I get the following error:-

    Line: 28
    Char: 8
    Error:'$.datepicker' is null or not an object
    Code: 0

    and the calendar icon is not visible. Have you come across this error before?


  2. Hi Dan,

    I took a look at your date picker site and noticed that the page is extremely wide (maybe 15 times as wide as the screen). This was on Safari 3.2.1, Mac OS X 10.5.5 (PPC - maybe a new one for XMas?) It looked fine on Firefox on the same Mac. Took a screen shot if your interested in seeing it.

    Other then that, everything worked great. The jQuery date picker is well worth the effort to eliminate the pop up and round trip.


  3. Glenn,

    Thanks for letting me know. Are you referring to the blog or the demo site?


  4. Hi Dan,
    Im new to Apex...
    Whatever I tried to do.. I couldnt get the datepicker up. If u dont mind could u pls upload the datepicker demo source.. so that I can import the application and check what im doing wrong.

    Thanks in advance...Siva

  5. Siva,

    Sorry, but the demo app is not really something I'd like to make available at this time... However,
    if you post an example of what you tried on I'd be happy to take a look.

    Feel free to email me at


  6. Dan, I tried the date picker, but dont see the date icon to the right of the item, what am i doing wrong ?
    Thanks a lot

  7. Please ignore previous post dan.