I'm using the jquery-ui datepicker. The problem is, the library inserts the calendar icon straight after the input field by default. But my HTML markup is a bit different and I want the calendar icon to appear somewhere else in the DOM, i.e. outside the parent container of the input field.

I even tried to add my own <img/> manually and added the class ui-datepicker-trigger, but it doesn't trigger anything.

How can I decide where the icon should appear in the DOM and it has to work?

This is what I want:

<div class="parent">
    <input id="datepicker" class="hasDatepicker" type="text" />
</div>

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

Not this (default jquery-ui insertion):

<input id="datepicker" class="hasDatepicker" type="text" />
<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

Many thanks

I'm using the jquery-ui datepicker. The problem is, the library inserts the calendar icon straight after the input field by default. But my HTML markup is a bit different and I want the calendar icon to appear somewhere else in the DOM, i.e. outside the parent container of the input field.

I even tried to add my own <img/> manually and added the class ui-datepicker-trigger, but it doesn't trigger anything.

How can I decide where the icon should appear in the DOM and it has to work?

This is what I want:

<div class="parent">
    <input id="datepicker" class="hasDatepicker" type="text" />
</div>

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

Not this (default jquery-ui insertion):

<input id="datepicker" class="hasDatepicker" type="text" />
<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

Many thanks

• javascript
• jquery
• html
• jquery-ui
• jquery-ui-datepicker

• 1 @Kasyx, I don't want to do that because, that's what causes the insertion straight after <input/>. That's what I asked in the question, how to cancel that default behaviour... – Shaoz Commented Apr 25, 2013 at 10:19
• Yes sorry, my fault. Now i understand your problem. – Kasyx Commented Apr 25, 2013 at 10:22
• No problem, it's cool. – Shaoz Commented Apr 25, 2013 at 10:23

2 Answers 2

Try to manually add trigger which will show datepicker on image click:

$("#datepickerImage").click(function() {
    $("#datepicker").datepicker( "show" );; 
});

try this

$(selector).datepicker({showOn: 'button', buttonImage: 'img/cal.gif',
      buttonImageOnly: true, buttonText: 'Open calendar'});

SEE HERE