Eonasdan的Bootstrap-Datetimepicker不适用于模态

I am using Bootstrap 3 and attempting to get eonasdan's datetimepicker working on a modal dialog.

我正在使用Bootstrap 3并尝试让eonasdan的datetimepicker处理模态对话框。

The dtp works fine on the main page itself, but it does not seem to trigger on the modal. I am sure it's something to do with when and how it's loaded, but can't figure it out.

dtp在主页面上运行正常，但它似乎没有在模态上触发。我确信它与何时以及如何加载有关，但无法弄明白。

Here's my code;

这是我的代码;

<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>

The input appears fine, populated with the elected item data and it looks ok with the icon next to it, but nothing happens on click.

输入显示正常，填充了选定的项目数据，它旁边的图标看起来没问题，但点击没有任何反应。

1 个解决方案

#1

See the working demo.

查看工作演示。

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

Please add following code end of html file

请在html文件中添加以下代码结尾

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

#1