In a previous post I described how to replace the default APEX calendar with a better looking jQuery calendar. But one of the steps is that the "Display as" and "HTML Form Element Attributes" needed to be changed. But using jQuery more extensively that isn't even necessary. When you put the following code in an HTML Region on Page 0 (assuming you already included the jQuery stuff), all existing APEX calendar items are automagically 'converted' to jQuery calendar items. (No guarantee though: I didn't test it on all sorts of pages, may be dependent on your template). Look here for a live demo...
$(function(){
// Remove original Datepicker
$("td.datepicker + td" ).remove();
// Add jQuery Datepicker to all Datepicker input fields that are not hidden
$("td.datepicker > input[type!=hidden]" ).datepicker(
{ dateFormat : 'dd/mm/yy'
, closeText : 'X'
, clearText : ''
, showOn : 'button'
, buttonImage : '#WORKSPACE_IMAGES#calendar.gif'
, buttonImageOnly : true
});
});
Comments
is there a reason why you are using "each" instead of just using
$("td.datepicker > input[type!=hidden]" ).datepicker
Because that also seems to work and is a little bit shorter and easier to read.
Greetings
Patrick
$("td.datepicker")
.next("td")
.remove()
.end()
.children("input[type!=hidden]")
.datepicker(
{ dateFormat : 'dd/mm/yy'
, closeText : 'X'
, clearText : ''
, showAnim : 'scale'
, showOptions : { origin: ['top', 'left'] }
, showOn : 'button'
, buttonImage : '#WORKSPACE_IMAGES#calendar.gif'
, buttonImageOnly : true
});
Too bad that the comment function doesn't allow a PRE tag to format the code. If you use chaining, indenting the code is very important so that you see the structure and which result set is used.
Greetings
Patrick
Patrick, thanks for the more compact syntax.
So the code gets shorter every time....
"<"link rel="stylesheet" type="text/css" href="#IMAGE_PREFIX#jquery/css/redmond/jquery-ui-1.8.4.custom.css" /">"
"<"script type="text/javascript" src="#IMAGE_PREFIX#jQuery/js/jquery-1.4.2.min.js"">""<"/script">"
"<"script type="text/javascript" src="#IMAGE_PREFIX#jQuery/js/jquery-ui-1.8.4.custom.min.js"">""<"/script">"
"<"script type="text/javascript"">"
$(document).ready(function () {
$(".datepicker ">" input[id]").datepicker();
$.datepicker.setDefaults({
dateFormat: 'dd-M-yy',
changeMonth: true,
changeYear: true,
closeText: 'Done',
showButtonPanel: true,
duration: 'slow',
prevText: 'Previous',
showOtherMonths: true,
selectOtherMonths: true,
dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
dayNamesMin: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
constrainInput: true,
showOn: 'both',
buttonImage: '#IMAGE_PREFIX#asfdcldr.gif',
buttonImageOnly: true,
buttonText: 'Calendar',
autoSize: true
});
});
$(function(){
// Remove Original Date Picker //
$("td.datepicker + td").remove();
// Add jQuery DatePicker to all DatePicker input fields not hidden //
$("td.datepicker ">" input[type!=hidden]").datepicker();
});
$(document).ready(function(){
$(".datepickernew").datepicker();
});
"<"/script">"
I'll try to do something at apex.oracle.com, but don't they use 4.0 now?
Just weird that using the code I showed that the calendar image won't show up on the internal replaced date pickers...
The image shows up if I create a Text Item with class="datepickernew" in the HTML Form Element Attributes of the page.