datetimepicker disparaît lors de la sélection

Question

J'ai un datetimepicker.

<input id="all-day-event-date" type="text"> 

Il s'agit d'une zone de saisie. Je leur déclencheur de se concentrer lorsque les charges de documents:

$('#all-day-event-date').trigger("focus"); 

Et ce qui se passe est que j'ai mon champ d'entrée et mon calendrier/sélecteur apparaît, comme prévu.

$("#all-day-event-date").datetimepicker({ 
    timepicker: false, 
    onChangeDateTime: function(dp, $input) { 
     var datetime = $input.val(); 
     var date = datetime.split(" ")[0]; 
     $input.val(date); 
    } 
}); 

Il ressemble à ceci:

Cependant, dès que je choisis une date, les dissapears calendrier:

Comment puis-je faire rester ?

Cette question est différente de celle posée précédemment. Lorsque je tente une solution en ligne:

<div style="overflow:hidden;"> 
    <div class="form-group"> 
     <div class="row"> 
      <div class="col-md-8"> 
       <div id="datetimepicker12"></div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker12').datetimepicker({ 
       inline: true, 
       sideBySide: true 
      }); 
     }); 
    </script> 
</div> 

Ce qui se passe est ceci:

Et il semble en ligne normalement lorsque j'appuie sur le bouton d'accueil:

Cette Ce n'est pas le comportement que je veux. Je veux que le calendrier soit là dès qu'il se charge et ne disparaisse jamais après, laissant l'utilisateur sélectionner et resélectionner sans avoir à cliquer sur des cases supplémentaires.

Answer 1

Ajouter focusout pour supprimer le focus de datepicker zone de saisie sur la sélection Date

$('#all-day-event-date').focusout(); 

Maintenant, le datepicker devrait apparaître à nouveau après vous vous concentrez sur l'entrée.

Voici un violon que j'ai trouvé très utile JSFiddle

modifier: si vous voulez que votre datepicker de ne pas disparaître du tout, lisez ce answer

Utilisez le calendrier en ligne avec Altfield

<input type="text" id="alternate" size="30" /> 
<div id="datepicker"></div> 

<script> 
    $("#datepicker").datepicker({ 
     altField: "#alternate" 
    }); 
</script>