jQuery Forum

Just make the target input field hidden and set the datepicker to open using an icon button:

1. $(function() {
2.     $('#dp').datepicker({showOn: 'button', buttonImage: 'img/calendar.gif', buttonImageOnly: true});
3. });
4. 
   
5. <input type="hidden" id="dp">

The problem with that approach is that I am using the datepicker within a server-based UI framework (built in Wicket) and the image is already provided in the UI and I need to attach the datepicker to it.  I cannot specify the image URL in the buttonImage parameter within this framework.  The image may also be represented as a div with a background image in it, but if I attach the datepicker to a div, it appears statically on the page.

What is needed is a way to attach the datepicker to any element such that it opens when that element is clicked, and target the hidden input field with the selected date.  Is this possible?

Try this instead:

1. $(function() {
2.     $('#dp').datepicker();
3.     $('#trigger').click(function() {
4.         $('#dp').datepicker('show');
5.     });
6. });
7. 
   
8. <input type="hidden" id="dp">
9. <img src="calendar.gif" id="trigger">