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.

• http://marcgrabanski.com/code/ui-datepicker
• http://docs.jquery.com/UI/Datepicker

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

• http://apex.shellprompt.net/pls/apex/f?p=apex_demo:2

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">
   //<![CDATA[
      
      $(document).ready(function(){
         $.datepicker.setDefaults({
            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']
         });
         
         $('#PXX_ITEM_NAME').datepicker();
      });
   
   //]]>
   </script>

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

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