Tyler Muth’s Blog

Technology with a focus on Oracle, Application Express and Linux

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.

19 Responses to “jQuery Datepicker and APEX”

  1. 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.

  2. 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.

  3. Hello,

    You can remove this line of code.

    //pThis.onfocus=this.blur();

    I forgot to remove it when I sent to you.

    Carl

  4. 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.

  5. 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

  6. 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.

  7. 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.

  8. 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.

  9. 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

  10. 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..

  11. Partha K said

    Thank you Gary, that worked and was quite helpful.

  12. 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

  13. […] jQuery Datepicker and APEX […]

  14. Pradeep said

    Thank you Gary !
    Worked like a charm…
    ~Pradeep

  15. 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.

  16. 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

  17. Loris Gayo said

    Just wanted to say your blog is extremely good. I usually like to hear one thing new about this because I have the similar blog in my Country on this subject so this help´s me a lot. I did a research over a subject matter and observed a beneficial number of blogs but absolutely nothing like this.Thanks for sharing so significantly inside your blog.

  18. guest said

    http://jscontrols.ru/?datepicker

  19. Kirby said

    I believed it was going to be some boring old post nevertheless you suprised me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: