How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups

Question

jQueryUI has a nice DatePicker with icon trigger (a calendar icon opens the calendar, similar behaviour to Outlook).

On the other hand, Bootstrap 3's Input Groups are really nice for connecting icons to input fields.

Can the two be combined without rewriting either one?

I have made a JSFiddle here. For the «Start Date» the jQueryUI icon trigger is not active. For the «End Date» it is enabled. The DatePicker icon, unfortunately, appears outside of the End Date's Input Group:

So, is it possible to enable the Icon Trigger as part of the Input Group (looking like «Start Date» but behaving like «End Date») without heavy modification?

Main Icon Trigger code:

$("#datepicker-end").datepicker({
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true
});

Main Input Group code:

<div class="input-group">
<input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

Answer 1

Looking around for solutions to a datepicker problem I was shocked to see an accepted answer with so many problems (and 10 upvotes). It only works by accidental side-effect.

• It has a DOM ready handler inside the click event. This is pointless as it does nothing (or it should at least be outside the click handler)
• It is reinitialising datepicker on every click of the icon

The corrected version should look like:

$(document).ready(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});

• Initialise datepicker once only
• Cause focus on the input when the icon is clicked (which fires up the calendar).

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JHBpd/151/

Note: It is preferred nowadays to use the shortcut DOM ready handler, so the example would become:

$(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});

Update to support multiple controls via class selectors:

Change the HTML to have identifiable classes and change the focus selectors to select the edit box relative to the button (within same input-group).

JSFiddle: http://jsfiddle.net/JHBpd/260/

$(function() {
  $(".datepicker-my").datepicker();
  $('.btn').click(function() {
    $(".datepicker-my", $(this).closest(".input-group")).focus();
  });
});