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 a

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

$("#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>

Answer 3

Below block will work with bootstrap 4, providing button trigger(not input focut) Output

$(function () {
        $("#searchTextDOB").datepicker({
            showOn: "button",            
            buttonImageOnly: false,
            buttonText: ''
        }).next(".ui-datepicker-trigger").addClass("input-group-text btn-light fa fa-calendar-alt").
            wrapAll('<div class="input-group-append"></div');
    });

Answer 4

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 5

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