title: How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups
body: <p>jQueryUI has a nice <a href="http://jqueryui.com/datepicker/#icon-trigger" rel="noreferrer">DatePicker with icon trigger</a> (a calendar icon opens the calendar, similar behaviour to Outlook).</p>
  
  <p>On the other hand, <a href="http://getbootstrap.com/components/#input-groups" rel="noreferrer">Bootstrap 3's Input Groups</a> are really nice for connecting icons to input fields.</p>
  
  <p>Can the two be combined without rewriting either one?</p>
  
  <p>I have made a <a href="http://jsfiddle.net/bjornte/FqZ9X/1/" rel="noreferrer">JSFiddle here</a>. 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:</p>
  
  <p>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?</p>
  
  <p>Main Icon Trigger code:</p>
  
  <pre><code>$("#datepicker-end").datepicker({
  showOn: "button",
  buttonImage: "img/calendar.gif",
  buttonImageOnly: true
  });
  </code></pre>
  
  <p>Main Input Group code:</p>
  
  <pre><code>&lt;div class="input-group"&gt;
  &lt;input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" /&gt;
  &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>