Bootstrap 日期时间选择器无法正常工作，也无法正常显示

Question

在我的页面中，我在两个输入字段中使用 jQuery 多日期选择器，在其他一些输入字段中我使用 bootstrap 日期时间选择器。但是我面临很多问题-

1)Boostrap 日期时间选择器工作不正常，没有显示在我想要的正确位置，并且在控制台中显示错误是 "uncaught typeerror: cannot read property 'top' of undefined"

2)当我将库引用作为完整 URL 时，只有它的工作，但是当我从我的 JS 和 CSS 库文件夹中提供引用时，它显示错误在控制台中为- $(....).datetimepicker 不是函数。

URL ---Bootstrap 日期时间选择器

<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

HTML

<div class="form-group  col-md-4 col-sm-4 txtnew  col-xs-6">
        <label for="date">Date:</label> <br />
        <s:textfield type="text" readonly="true" id="createDate" 
         name="createDate"class="form-control" autocomplete="off"/>
</div>

JAVASCRIPT

<script>
$(function() {
  $('#createDate').datetimepicker();
});
</script>

screenshot of error in console

请帮帮我，我搜索了很多都无法解决。

提前致谢...

Answer 1

请参考下面的jsfiddle

https://jsfiddle.net/hd75xoky/1/

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <input type='text' class="form-control" id='createDate' name="createDate" readonly />
    </div>
</div>

 $(function () {
     $('#createDate').datetimepicker({
       ignoreReadonly: true
     });
 });

问题似乎是你的 link 的引用引起的，因为我 link 它使用你 post 的引用，它遇到了与你遇到的相同的错误，下面是我用的cdnjs的参考，随便看看

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Bootstrap 日期时间选择器无法正常工作，也无法正常显示

Bootstrap dateTime picker is not working and not showing properly as well

twitter-bootstrap

momentjs

datetimepicker

bootstrap-datetimepicker