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.

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