Tyler Muth’s Blog

Technology with a focus on Oracle, Application Express and Linux

Posts Tagged ‘Oracle APEX jQuery’

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.

Posted in APEX, JavaScript / AJAX | Tagged: | 19 Comments »