Bootstrap-Datetimepicker Eonasdan не работает в модальном

Question

Я использую Bootstrap 3 и пытаюсь получить eonasdan's datetimepicker, работая над модальным диалогом.

dtp отлично работает на самой главной странице, но, похоже, он не запускается на модальном уровне. Я уверен, что это как-то связано с тем, когда и как он загружен, но не может понять это.

Это мой код;

<div id="visitPast"> 
<h4>Latest Visits</h4> 
<table class="table table-striped table-bordered table-hover table-compact"> 
    <thead> 
     <tr class="text-info"><td>Visit Date</td><td>Start Time</td><td>End Time</td><td>School</td><td>Worker</td></tr> 
    </thead> 
    <tbody id="loadingPast"> 
     <tr><td colspan="5">Loading Data. . . .</td></tr> 
    </tbody> 

    <tbody data-bind="foreach: visitsPast"> 

     <tr style="font-size:11px;" data-bind="click: $parent.selectItemP" class="rowlink" data-toggle="modal" data-target="#visitModal"> 


      <td data-bind="text: $data.visitdate"></td> 

      <td data-bind="text: $data.visitstarttime"></td> 
      <td data-bind="text: $data.visitendtime"></td> 
      <td data-bind="text: $data.schoolname"></td> 
      <td data-bind="text: $data.username"></td> 


     </tr> 
    </tbody> 
</table> 
<!-- Modal for Visit --> 
<div id="visitModal" data-bind="with: selectedItemP" role="dialog" class="modal fade" tabindex="-1" aria-labelledby="visitModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 

       <h4 id="visitModalLabel">Visit Details</h4> 

      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class='col-md-4'> 
         <div class="form-group"> 
          <div class='input-group date' id="datetimepicker3"> 
           <input type="text" class="form-control" data-bind="value: $data.visitdate" /> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
           <script type="text/javascript"> 
$(function() { 
    $('#datetimepicker3').datetimepicker(); 
}); 
           </script> 
          </div> 
         </div> 
         </div></div> 


        </div> 

        <div class="modal-footer"> 
         <table style="width:100%"> 
          <tr> 
           <td style="text-align:left"><button class="btn btn-danger">Cancel <i style="color:white;" class="fa fa-thumbs-o-down fa-lg" title="Complete Task"></i></button></td> 
           <td style="text-align:right"><button class="btn btn-success">Save <i style="color:white;" class="fa fa-thumbs-o-up fa-lg" title="Complete Task"></i></button></td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 
</div> 

вход появляется хорошо, заселена с избранными элементами данных, и это выглядит нормально со значком рядом с ним, но ничего не происходит по щелчку.

Answer 1

См. Рабочий демонстрационный пример.

https://plnkr.co/edit/lRbmXOGRtnY4FikKZLaY?p=preview

Пожалуйста, добавьте следующий код конца файла HTML

<script type="text/javascript"> 
$(function() 
{ 
    $('#datetimepicker3').datetimepicker(); 
}); 
</script>