Comment combiner le déclencheur d'icônes jQueryUI DatePicker avec les groupes d'entrée de Bootstrap 3

jQueryUI a une belle DatePicker avec l'icône de déclenchement (une icône de calendrier ouvre le calendrier, un comportement similaire à Outlook).

D'autre part, Bootstrap 3 de l'Entrée des Groupes sont vraiment sympa pour le raccordement d'icônes pour les champs de saisie.

Peut les deux être combinés sans réécriture, soit un?

J'ai fait un JSFiddle ici. Pour la «Date de Début» la jQueryUI icône du déclencheur n'est pas active. Pour la «Date de Fin» elle est activée. Le DatePicker icône, malheureusement, s'affiche à l'extérieur de la Date de Fin de Saisie de Groupe:

Donc, est-il possible d'activer l'Icône de Déclenchement dans le cadre du Groupe d'Entrée (ressemblant à «Date de Début», mais de se comporter comme la «Date de Fin»), sans effort de modification?

Icône principal Déclencheur de code:

$("#datepicker-end").datepicker({
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true
});

Entrée principale code de Groupe:

<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>

source d'informationauteur bjornte