Eonasdan 的 Bootstrap-Datetimepicker 无法在模态中工作

Posted 2023-04-12

【中文标题】Eonasdan 的 Bootstrap-Datetimepicker 无法在模态中工作

【英文标题】：Eonasdan's Bootstrap-Datetimepicker not working in modal

【发布时间】：2015-09-17 01:54:47

【问题描述】：

我正在使用 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>

输入看起来很好，填充了选定的项目数据，并且它旁边的图标看起来很好，但点击时没有任何反应。

【问题讨论】：

这个运气好吗？我也有同样的问题。

如果我是你，我会放弃这个并使用 Jquery datepicker jqueryui.com/datepicker 它已经过尝试，事实证明它也很容易重新设置为 Bootstrap 主题。

【参考方案1】：

查看工作演示。

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

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

<script type="text/javascript">
$(function () 

    $('#datetimepicker3').datetimepicker();
);
</script>