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();


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:

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

Pawel Co Faddey said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.