In JQuery, How can I show calendar when someone clicks on an image?

I want to load uidatepicker (jQuery) when someone clicks on an image. Right now, uidatepicker is attached to an input field: ( and it is working fine too)

$('#selected_date').datepicker(开发者_JAVA百科{ dateFormat: 'M d, yy' }); $('#selected_date').click( function() { $('#selected_date').datepicker({ dateFormat: 'M d, yy' }); });

How can I show calendar when someone clicks on an image?

Assign the class selected_date to your image(s) and use code:

$('.selected_date').datepicker({..........});

Now the date picker will be triggered on the element (image in your case) that has class selected_date.

There is a good example of this on the jquery ui site, complete with source code:

http://jqueryui.com/demos/datepicker/#icon-trigger

The following will place a small 'calendar' image next to the input textbox...when the image is clicked the uidatepicker will appear...

$('ReferenceToTextBoxHere').datepicker({
        showOn: 'button',
        buttonImage: './images/Calendar.png',
        buttonImageOnly: true        
 });

where the "buttonImage" property is a path to the image u want to show to be clicked on