Wie kombinieren Sie die jQueryUI DatePicker-Symbol-Trigger mit Bootstrap 3 Input-Gruppen

jQueryUI hat eine schöne DatePicker mit Symbol auslösen (ein Kalender-Symbol öffnet sich der Kalender, ein ähnliches Verhalten von Outlook).

Auf der anderen Seite, Bootstrap 3 Input-Gruppen sind wirklich nett für den Anschluss von icons, Eingabefelder ein.

Können die beiden kombiniert werden, ohne entweder umschreiben?

Ich habe eine JSFiddle hier. Für das «Start-Datum» die jQueryUI-Symbol-trigger ist nicht aktiv. Für die «End-Datum» aktiviert ist. Das DatePicker-Symbol, leider wird außerhalb der Ende-Datum - Eingabe-Gruppe:

So, ist es möglich, aktivieren Sie das Symbol Auslösen, als Teil der Input-Gruppe (sah aus wie «Start-Datum», sondern verhält sich wie ein «Ende-Datum») ohne große änderung?

Haupt-Symbol-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>
Diese Seite hat deine Antwort stackoverflow.com/questions/7733904/...

InformationsquelleAutor bjornte | 2013-10-18

Schreibe einen Kommentar