Schließen Sie den Kalender (datetimepicker), wenn das eingegebene Textfeld ausgeblendet ist und nur die Schaltfläche/input-group-addon

Question

Ich benutze Bootstrap Datetimepicker, um einen Kalender auf meiner Seite zu haben und Tage und Stunden auszuwählen.

Dies erfordert, dass ich eine Eingabegruppe habe. Und ich habe meinen gesetzt, wie folgt aus:

<div id="dateChoose" class="form-group"> 
    <div class='input-group date' id='datetimepicker1'> 
     <input type='hidden' style="border:none" class="form-control" /> 
     <span class="btn btn-primary input-group-addon "> 
      <span class="glyphicon glyphicon-calendar"> 
      </span> 
     </span> 
    </div> 
</div> 

Einmal habe ich nicht das Textfeld wollte (nur nur einen Knopf, um Pickup ein Datum) und einmal war ich nicht in der Lage richtig die funcionality von Datetime hinzuzufügen eine einzelne Taste, ich habe beschlossen, die input-group-addon als eine Schaltfläche mit einigen CSS zu "maskieren", um wie eine andere Schaltfläche aussehen, und das Textfeld (type='hidden') auszublenden.

This (image) sieht gut aus, denke ich. Aber jetzt, als ich die <input> versteckte, wenn ich irgendwo auf dem Bildschirm klicke, wird der Kalender nach dem Öffnen nicht geschlossen.

Wie kann ich das lösen, um den Kalender zu schließen, wenn ich irgendwo klicke, wie es wäre, wenn Text nicht ausgeblendet wäre?

Answer 1

Geben Sie Ihre Eingabe Kalender eine ID, dann fügen Sie den Code unten

$("#id").on("blur", function(e) { $(this).off("focus").datepicker("hide"); }); 

Wenn Sie den Fokus verlieren, sollten Sie Ihren Kalender gehen weg