Immer bootstrap-datepicker anzeigen, nicht nur auf Fokus

Question

Ich benutze die bootstrap-datepicker-Bibliothek, um einen Datumsauswahl zu erstellen, damit der Benutzer das Datum auswählen kann. Ich möchte immer den Picker anzeigen, nicht nur, wenn der Benutzer auf ein Eingabefeld oder eine Schaltfläche klickt.

Wie kann ich das tun?

Answer 1

Stellen Sie zunächst sicher, dass Sie the latest version der Bibliothek verwenden, die derzeit 1.2.0 ist. Die original version von eyecon ist ziemlich schlecht dokumentiert und ich weiß nicht, ob es tun kann, was Sie wollen.

Es gibt mehrere Möglichkeiten, Ihr Problem zu lösen. Verwenden Sie je nachdem, welche dieser Sie bevorzugen:

1. ein embedded/inline datepicker erstellen und fügen Sie dann einen changeDate Handler zu. Sie werden HTML möchten, ist so etwas wie

   <input id="my-input"> 
   <div id="my-datepicker"></div> 
   

   und die folgende JavaScript:

   $("#my-datepicker").datepicker().on('changeDate', function (e) { 
       $("#my-input").text(e.format()); 
   }); 
   

   Beachten Sie, dass e.format eine bequeme Methode auf der events Seite der Dokumentation dokumentiert ist, und wenn sie aufgerufen wird, wie es hier ist , gibt eine Zeichenfolge zurück, die das ausgewählte Datum darstellt, das entsprechend dem format string des Datumsspeichers formatiert wurde.

   Sie müssen Ihr eigenes CSS verwenden, um den Datumsauswahlpunkt richtig zu positionieren, wenn Sie diesen Ansatz verwenden.

   Hier ist ein JSFiddle dies in Aktion zeigt: http://jsfiddle.net/4wFJc/3/

2. Verwenden Sie eine gewöhnliches input datepicker, es ausdrücklich auf Schöpfung zeigen, und dann den hide() Methode mit einem No-op picker ersetzen, so dass es nie ausgeblendet werden kann.

   Es ist unnötig zu sagen, dass dies ein hässlicher Hack ist, der möglicherweise aufhören wird, in einer zukünftigen Version der Bibliothek zu arbeiten. Ich würde nicht vorschlagen, es zu benutzen. Es hat den (zweifelhaften) Vorteil gegenüber dem Inline-Block-Ansatz, dass es den Datepicker für dich positioniert und einen Pfeil enthält, der es mit deiner <input> verbindet, also füge ich es der Vollständigkeit halber ein.

   Sie werden wie HTML etwas brauchen:

   <input id="my-input"> 
   

   und den folgenden JavaScript:

   $input = $("#my-input"); 
   $input.datepicker(); 
   $input.data('datepicker').hide = function() {}; 
   $input.datepicker('show'); 
   

   Hier ist ein JSFiddle diesen Ansatz in Aktion zeigt: http://jsfiddle.net/4wFJc/4/

Answer 2

ich diesen picker nicht so verwende ich nicht vertraut bin, wie es verwendet wird. Der schnelle und schmutzige Weg wäre, die Dropdown-Menü-Kategorie datepicker a .datepicker.CLASSNAME {display: block !important;} zu geben. Auf diese Weise wird das Dropdown immer sichtbar sein.

Answer 3

Wenn Sie mit dieser Datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Sie es sehen können, ist eine Methode: .datepicker ('show')

Rufen Sie diese auf picker Objekt, wenn Ihr $ (document) .ready()