jQuery datepicker

Oracle's native datepicker is extremely primative and is in urgent need of an update. I do not like the fact that it pops up a new window, which in my experience can easily be lost behind other windows and forgotten about. Luckily there is a better solution out there, in the form of a jQuery datepicker. This does not require a new window and also does not require much to integrate into an APEX application. Here is a short guide on how to integrate jQuery datepicker into APEX.

The first step is to ensure that you have the jQuery library included in your application. Follow guidelines here to do this. Basically you upload the jQuery Javascript file to application images and include it in your app using the following code

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.3.1.min.js"></script>

In addition to the jQuery library you must also download the jQuery ui package. this can be found at ui.jquery.com/download. jQuery allow you to create a custom download. This has the benefit of reducing the size of the file while still giving you the features that you want to use. When creating the package ensure that you select the ui core and the datepicker widget


Once the file has been downloaded, upload the script to the application images and include the script in your application. This is done in the same as the core jQuery file.

As well as including the javascript file you must also include the following CSS files. These are stored inside the theme folder

• ui.datepicker.css
• ui.theme.css

Once these files are uploaded to the shared components > images, use the following code to include the css in your application

<link rel="stylesheet" href="#WORKSPACE_IMAGES#ui.datepicker.css" type="text/css">

<link rel="stylesheet" href="#WORKSPACE_IMAGES#ui.theme.css" type="text/css">

So far we have the following code in place to include the relevant Javascript and CSS files to allow you to integrate the datepicker

Before creating the datepicker field in the app we must define how jQuery will attach the datepicker functionality to items on our screen. This can be done on an item by item basis but for simplicity i will assign the functionality to all items with the class of "datepicker"

<script>

$(document).ready(function(){

$(".datepicker").datepicker({
showOn: "both",
buttonImage: "#IMAGE_PREFIX#asfdcldr.gif",
buttonImageOnly: true,
dateFormat: 'dd/mm/yy'
});

});

</script>

Finally create an item with a type of "text" and assign it a class of datepicker

now when you run the page you should have a date field with a datepicker popup that is infinitly nicer than the in built Oracle datepicker

view example here