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

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/

Answer 2

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

Answer 3

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

Answer 4

$("#checkin").datepicker({
  dateFormat: 'dd/mm/yy',
  minDate: '0',
  changeMonth: true,
  numberOfMonths: 1
 });

.datedivmng{
    float: left;position: relative;
}
.datedivmng .datepicker{
    position: relative;width: 87%!important;
    cursor: pointer;
}
.datedivmng:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';
    content: "\f073";
    color: #329ac4;
    font-size: 16px;
    text-shadow: none;
    position: absolute;
    vertical-align: middle;
    pointer-events: none;
    float: right;
    top: 2px;
    right: 7px;
}

<div class="datedivmng">
  <input type="text" id="checkin" name="checkin"  value="" /></div>