作成時に自動的にbootstrap-datetimepickerを表示

Question

datetimepickerが作成されたらすぐに自動的に開きます。私は、作成後にshowメソッドを呼び出そうとしましたが、その後は終了しません！

例えば、私は直観的に、私が外をクリックしたとき、またはフォーカスを失ったときにウィジェットが閉じることを期待しています。

// Set up form widgets 
 
$("#input_completed_at").datetimepicker({ 
 
    sideBySide: true 
 
}); 
 

 
$("#input_completed_at").data("DateTimePicker").show();

.modal-open .modal.modal-allow-overflow { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<div id="myModal" class='modal fade modal-allow-overflow' data-width="760"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
 
     <h4 class="modal-title">Pick a date!</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <label for="input_completed_at">Task Completion Date</label> 
 
      <div class="input-group date" id="input_completed_at"> 
 
      <input type="text" name="completed_at" class="form-control"> 
 
      <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

それが自動的に表示されますが、それは外のクリック/フォーカスを失ったときに自動的に閉じるように取得するためのより良い方法はありますか？

UPDATE：私のdatepickerがBootstrapモーダルポップアップの内側にある場合にのみ問題があるようです。更新された例を参照してください。

Answer 1

代わりにボタンをクリックしてください。ここで

ライブ例：あなたのENVでtrue`をプロパティ：

// Set up form widgets 
 
$("#input_completed_at").datetimepicker({ 
 
    sideBySide: true 
 
}); 
 

 
$('#myModal').on('shown.bs.modal', function (e) { 
 
    $("#input_completed_at").data("DateTimePicker").show(); 
 
});

.modal-open .modal.modal-allow-overflow { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<div id="myModal" class='modal fade modal-allow-overflow' data-width="760"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
 
     <h4 class="modal-title">Pick a date!</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <label for="input_completed_at">Task Completion Date</label> 
 
      <div class="input-group date" id="input_completed_at"> 
 
      <input type="text" name="completed_at" class="form-control"> 
 
      <span class="input-group-addon"> 
 
       <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

それは少しハックですが、あなたはそれが開くようにしたい場合は、私

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 

<div id="myModal" class='modal fade modal-allow-overflow' data-width="760"> <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class='modal-header'> 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
     <h4 class="modal-title">Pick a date!</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="input_completed_at">Task Completion Date</label> 
      <div class="input-group date" id="input_completed_at"> 
      <input type="text" name="completed_at" class="form-control"> 
      <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> </div> </div> 

JS

// Set up form widgets 
$("#input_completed_at").datetimepicker({ 
    sideBySide: true 
}); 

$("#input_completed_at").data("DateTimePicker").show(); 
$(".modal-header").click(function() { 
    $("#input_completed_at").data("DateTimePicker").hide(); 
}); 

$("#input_completed_at").click(function() { 
    $("#input_completed_at").data("DateTimePicker").toggle(); 
}); 

EDIT のために働いているようですmodal initを使用すると、あなたはモーダルが示されたときのDateTimePickerを表示するshown.bs.modalようbootstrap modal eventsを使用することができます

$(".btn").click(function() { 
    $("#input_completed_at").data("DateTimePicker").show(); 
}); 

Codepen