jQuery Datepicker and APEX
Posted by Tyler Muth on July 16, 2008
APEX includes a great datepicker, but it is a popup window and there are a number of newer, better looking options out there. One of my favorites is from the jQuery UI project (direct link to datepicker section). If you haven’t worked with jQuery yet, it’s well worth a look as it’s very well documented and there are a ton of plugins. As always, I STRONGLY recommend you use the Firebug plugin for Firefox for any JavaScript and CSS work as it will save you many, many hours, particularly in a hosted environment like APEX.
OK, on to the good stuff. You can try out the examples here, or download the example application here. There are several JavaScript and one CSS file inlcuded in the page template, as well as some customized CSS classes. The header section of page 1 is where the following JavaScript is declared:
function disable_kinda(pThis){
$x_Style(pThis,'color','#ccc');
pThis.onfocus=function(){this.blur();}
}
$(document).ready(function(){
disable_kinda($x('P1_DATE_ONE'));
$('#P1_DATE_ONE').datepicker({
showOn: "both",
buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif",
buttonImageOnly: true});
$('#P1_DATE_TWO').datepicker({
showOn: "both",
buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif",
buttonImageOnly: true});
$('#P1_DATE_THREE').datepicker({
dateFormat: "D, M dd, yy",
showOn: "both",
buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif",
buttonImageOnly: true});
$('#P1_DATE_FOUR').datepicker({
onSelect: function(date) { doSubmit("DATE_CHANGE");},
showOn: "both",
buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif",
buttonImageOnly: true});
$('#P1_DATE_FIVE').datepicker({
onClose: function(date) { doSubmit("DATE_CHANGE");},
rangeSelect: true,
numberOfMonths: 2,
minDate: new Date(2008, 5 -1, 1),
maxDate: new Date(2008, 7 -1, 30),
showOn: "both",
buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif",
buttonImageOnly: true});
});
Thanks to Carl Backstrom for the “disable_kinda” function, as well as suggesting I look at jQuery in the first place.
MatjazC posted a good link in the comments to this site, which is the development page for this speciific comments. The key point there is the direct link on that page to the CSS for this control. I used the flora.css that ships with jQuery, then modified a few of the classes. It would be better to start with the this one instead.
Partha K said
Thanks for this. Can you give an example of how this works for Tabular forms – like the Hiredate column as datepicker? Same example, but with 5 Hiredate columns with the different datepicker options.
Tyler Muth said
I really hate tabular forms, but if you must, you need to assign each element a unique ID, as the call to datepicker takes in the ID of the element. I am not going to post an example as I think everyone jumps to tabular forms as a first choice when I really think they are a measure of last resort.
Carl Backstrom said
Hello,
You can remove this line of code.
//pThis.onfocus=this.blur();
I forgot to remove it when I sent to you.
Carl
Arie Geller said
Hi Tyler,
Useful blog, as usual.
I briefly looked at the jQuery site, looking for translation options. I saw they have tutorials in several languages, but nothing on NLS. Do you know if the date picker, for example, can be translated into other languages?
Thanks,
Arie.
Dimitri Gielis said
I’ve used this before on ApexBlogs (http://www.apexblogs.info) also, if somebody would see another example, you can see it in action there too.
Dimitri
MatjazC said
Arie, in datepicker standalone download version look in folder i18n. You have plenty of languages to choose and you can also adapt one js file to your needs.
MatjazC said
… and yes, here you can get CSS.
It’s this guy’s idea, not mine. And I haven’t played with it yet.
Tyler Muth said
@Carl: Good call, I took out that line.
@Dimitri: Very cool, I never noticed it on the ApexBlogs site.
@MatjazC: Thanks for the link to the CSS, I totally forgot about this have added it to the main post.
Dan said
Tyler,
I remember posting on this a little bit ago… http://www.danielmcghan.us/2008/06/replacing-date-pickers.html If one follows that link to the there is some information on “installing” jQuery in ApEx and in the demo app, there’s a link to sending an iCalendar event via email which uses a jQuery time picker as well. Very cool!
Regards,
Dan
Gary said
“Response 2:you need to assign each element a unique ID, as the call to datepicker takes in the ID of the element.”
You may hate me for this (if you really dislike tabular forms) but there’s an easier way to do it. In the “Tabular Form Element”, set a class in “Element Attributes” such as
class=”jqDatePicker”
Then in the region footer, you can apply the datepicker to all elements with that class, rather than individually by id. I’m using jquery 1.2.6.
...script...
$(document).ready(function(){ $(".jqDatePicker").datepicker(); });
...script..
Partha K said
Thank you Gary, that worked and was quite helpful.
Jeff Holoman said
Tyler,
Thanks for setting up the demo on this it was quite helpful. I noticed on the date range that the flora css was showing through. You might want to add:
div.ui-datepicker-multi .ui-datepicker {
border: 1px solid #bbbbbb;
}
To the customized file.
Jeff
jQuery Selectors Will Change Your Life « Tyler Muth’s Blog said
[...] jQuery Datepicker and APEX [...]
Pradeep said
Thank you Gary !
Worked like a charm…
~Pradeep
E DiMotta said
I have a few datepickers on a couple of pages and they work perfectly in Firefox. But they do not work at all in IE. I should say in IE 7.0 or 8.0 – they do seem to work in IE 6.0. I noticed that you reference a seperate CSS style sheet when the browser is IE. Is that seperate CSS part of a theme? I downloaded the Cupertino theme. Wasn’t sure if you supply a different CSS for IE?
By the way when i go to your demo site with IE 7.0 the date picker samples do work – that’s when i noticed the if statement.
ZK@Web Marketing Blog said
For the pre-loader we just set some styles to make sure it get’s displayed in the correct position : in this case 70px from the top and horizontally in the middle of the container div. We also make sure to set the display attribute to “inline”, thus making sure the pre-loader img is shown while all other img’s are hid