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...
Comments
Have you tried it using IE 6? The calendar is not showing right.
I did a similar demo but I didn't release it since I can't get it to run perfectly for IE.
http://apex.oracle.com/pls/otn/f?p=987654321:15:0
To make it work perfectly, I used Dimitri jQuery library used by Apex Blog Aggregator.
http://apexblogs.info/pls/apex/f?p=113:8:0
I didn't have much time to find what's the difference between both version of jQuery.
If you find a fix, please let me now.
Thanks,
Looks like fun stuff and actually more useful than my "goody for eye-candy" comment would suggest.
Thanks for sharing, again.
@Stew : The files also get cached on the client, so only when a new version is available it gets downloaded. And I reduced the number of includes to the minimum (see the post).
Thanks,
Jon
I have now managed to get this working and looks really good. The only problem I am having is that field 'Read Only' conditions in APEX are not applied. Is this something that you have come across?
Thanks,
Jon
$(fieldname).datepicker("disable")
Is that what you mean?
For the field in APEX I have a PL/SQL expression on my date field that defines whether the field is read only or not within APEX.
TO_DATE(:P_EFTV_FROM,'DD/MM/YYYY') > TO_DATE(SYSDATE,'DD/MM/YYYY')
i.e. disable if prior to today.
However, the state of the field is not changed using the standard APEX functionality where the javascript class has been applied. In APEX the field would normally be 'greyed' out.
I thought that the logic, $(fieldname).datepicker, ("disable"), simply disabled the button but how do you disable the data entry?
Hope this is clear.
Jon
$(".datefield").datepicker it seems to work properly.
Example on the apex.oracle.com page in the post.
I think my problem was having more than one date field on the screen. However, using $("input.datefield").datepicker works perfectly.
Thanks for the help.
Regards,
Jon
Even though Jon got it to work, to me (just getting started with APEX and really dumb with Javascript) it is still not clear what you mean with "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: "
Could you elaborate at little bit more, please?
The $(function(){"code goes here"}); is (what I referred as) the 'document.ready' function. All the "code goes here" will be executed after the DOM is loaded. So in the example that code is:
$("input.datefield").datepicker(). So the datepicker() function is executed for every INPUT field with class="datefield".
Just cut'n'paste that code and (hopefully) you'll see that working.
Good luck and thanks for commenting,
Roel
Thanks a lot for the information. I was trying to make it happen, but the background of the calendar comes blank. I have no idea what causing it, great if you could have a look and provide some helpful hint.
http://apex.oracle.com/pls/otn/f?p=JQueryDatePicker2
Temporary Dev user account
Workspace: ligon_apex
username/pass: test
Application Alias : JQueryDatePicker2
ID: 42029
Thank you and Regards
Ligon
I uploaded another ui.datepicker.css and flora.datepicker.css. I see some color now. Seems like your missing some color setting in your css.
Thanks a ton for looking into it and spending time to get it working. I could see the colors now, Although there looks to be some alignment issues, which off course something I could play around and figure out.
Appreciate your quick response.
Thank you and Regards
Ligon
is there a way in the datetimepicker to only have selectable options eg. 15, 30, 45 and 0 for the minutes rather than the whole sequence of 0 upto and including 59?
i have programmed something similar in PHP. now jquery & apex, please?
thanks a lot.
kind regards,
-victorbax-