11 February 2012

jQuery calendar in all APEX datepickers

Would you like to have nice datepickers inside your application without any special coding or changing existing date fields?

If you use jQuery, just add this code to your page template HTML header and enjoy jQuery datepickers in every place where you have APEX datepicker item.

<script type=”text/javascript”>
$(document).ready(function () {
     $(".datepicker > input[id]").datepicker();
});
</script>

3 comments:

Timothy said...

This doesn't seem to get rid of the default calendar when the image button next to the text area is clicked...

Tim Ward said...

Ok, adding this:

$(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 : '/i/calendar.gif'
, buttonImageOnly : true
});
});

Gets rid of the original DatePickers Icon, but doesn't show the jQuery DatePicker one.....

Tim Ward said...

What would cause the jQuery date picker to not display the image set by buttonImage when using the replacing datepicker type code?

If I create a new datepicker text area, the image is shown....