Eonasdan的Bootstrap-Datetimepicker在模式下不工作

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>