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>
InformationsquelleAutor bjornte | 2013-10-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Suche nach Lösungen
datepicker
problem ich war schockiert zu sehen, eine akzeptierte Antwort mit so vielen Problemen (und 10 upvotes). Es funktioniert nur durch zufällige Nebenwirkung.datepicker
auf jeden Klick auf das SymbolDie korrigierte version Aussehen sollte:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/JHBpd/151/
Hinweis: Es wird bevorzugt, heutzutage verwenden die Verknüpfung DOM-ready-handler, so würde das Beispiel geworden:
Update für die Unterstützung von mehreren Steuerungen über Klassen-Selektoren:
Ändern Sie den HTML-Code einer bestimmbaren Klassen und ändern Sie den Fokus-Selektoren wählen Sie die edit-box relativ zum button (innerhalb der gleichen input-Gruppe).
JSFiddle: http://jsfiddle.net/JHBpd/260/
Mit Klasse - Selektoren anstelle des ID Selektoren gezeigt und es wird für Sie arbeiten alle so lange, wie die focus() auf ein element relativ zu das in den click-handler. Hinzugefügt Beispiel oben
vielen Dank für Ihre Hilfe!
Tolle Lösung! Vielen Dank für diese!
InformationsquelleAutor Gone Coding
Ich denke, dass Sie möchten, zu zeigen, jquery-ui-datepicker-bootstrap-Symbol-trigger, wenn es so ist, ist hier die Lösung. JSFiddle Demo
JS:
InformationsquelleAutor Rahul Gupta
Bevorzuge ich
label
tag mitfor
Attribut wählen Sie das Eingabefeld.Weitere Informationen und Beispiele: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Den Wert
for
- Attribut wird die ID eines labelable Formular-bezogene element, z.B.input
. In meinem verstehen, der Fokus wird dabei auf Ihren input, da die Eingabe bereits löst mit der Datum-picker. So, die Arbeit ist getan.JSFiddle: https://jsfiddle.net/om01kgk5/1/
Der JSFiddle nicht mit dem Beispiel oben (z.B. gibt es nicht, auch eine
label
und funktioniert nicht). Können Sie ein update mit einer funktionierenden Beispiel?aktualisiert
Ausschneiden und einfügen von meine eigene arbeiten JSFiddle genau (einschließlich meiner auskommentierten Zeile etc) ist nicht das, was ich im Sinn hatte, für die Ihr die Arbeit Antwort 🙂 nennen Wir das Plagiat. Bitte akzeptieren Sie meine
-1
bis Sie fügen Sie Ihre eigenen Antwort.Sorry, ich verwechselte, wie der Fragesteller die jsfiddle. Geändert jsfiddle.
InformationsquelleAutor AdaroMu