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

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();
  });
});

I think that you want to show up jquery ui datepicker on bootstrap icon trigger, if it is so here is the solution. Demo JSFiddle

JS:

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

I prefer to use label tag with for attribute to select the input field.

The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute.

More details and examples: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The value of for attribute will be the ID of a labelable form-related element, e.g. input. In my understand it will focus to your input, since the input already triggers with the date-picker. So, the work is done.

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

JSFiddle: https://jsfiddle.net/om01kgk5/1/