Immer anzeigen bootstrap-datepicker, nicht nur Fokus auf
Ich bin mit dem bootstrap-datepicker-Bibliothek zum erstellen eines Datumsauswahl, damit der Benutzer das Datum auswählen. Ich möchte immer display-picker, nicht nur, wenn der Benutzer auf ein Eingabefeld oder eine Schaltfläche.
Wie kann ich dies tun?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erstens, stellen Sie sicher, dass Sie mit die neueste version der Bibliothek, die derzeit 1.2.0. Die original version von eyecon ist ziemlich schlecht dokumentiert und ich weiß nicht, ob es das tun können, was Sie wollen.
Gibt es ein paar Möglichkeiten, um Ihr problem zu lösen. Je nachdem, was Sie bevorzugen:
Erstellen Sie eine embedded/inline datepicker und fügen Sie dann eine
Datum
- handler zu. Möchten Sie HTML-Code, der ist so etwas wieund den folgenden JavaScript-Code:
Beachten Sie, dass
e.format
ist eine bequeme Methode, dokumentiert auf der Veranstaltungen Seite der Dokumentation, und wenn Sie angerufen werden, wie es hier ist, wird wieder ein string, der dem ausgewählten Datum formatiert gemäß der datepicker ist format-string.Müssen Sie verwenden Sie Ihre eigenen CSS entsprechend positionieren Sie den datepicker, wenn Sie diesem Ansatz.
Hier ein JSFiddle demonstriert dies in Aktion: http://jsfiddle.net/4wFJc/3/
Verwenden Sie eine gewöhnliche input-datepicker, explizit zeigen Sie auf erstellen, und ersetzen Sie dann den datepicker ist
hide()
Methode mit einem no-op, so dass es kann nie ausgeblendet werden.Unnötig zu sagen, dies ist ein hässlicher hack, das kann auch aufhören zu arbeiten in einer zukünftigen version der Bibliothek. Ich würde nicht empfehlen es zu benutzen. Es hat den (zweifelhaften) Vorteil gegenüber der inline-block-Ansatz, dass es Positionen der datepicker für Sie und enthält einen Pfeil, den Anschluss an Ihren
<input>
, obwohl, so dass ich es der Vollständigkeit halber.Müssen Sie HTML so etwas wie:
und den folgenden JavaScript-Code:
Hier ein JSFiddle demonstriert dieses Konzept in Aktion: http://jsfiddle.net/4wFJc/4/
Ich glaube nicht, verwenden Sie diese datepicker, so bin ich nicht vertraut, wie es verwendet wird. Die quick-and-dirty Weg wäre, geben die datepicker-dropdown-Menü eine Klasse
.datepicker.CLASSNAME {display: block !important;}
.Auf diese Weise die dropdown wird immer sichtbar sein.
<input>
entfernt den datepicker aus der DOM.Wenn Sie mit dieser datepicker : http://www.eyecon.ro/bootstrap-datepicker/
Können Sie sehen, gibt es eine Methode : .datepicker('show')
Rufen Sie diese auf datepicker-Objekt, wenn Sie Ihre $(document).ready()
<input>
Feld, anstatt wodurch es permanent angezeigt (was das OP-Ziel). Sicherlich, das was du gepostet hast funktioniert nicht mit die aktuelle version der bootstrap-datepicker.