Question

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

1）引导日期时间选择器无法正常工作，无法在我想要的适当位置显示，并且在控制台中显示错误 “未捕获的typeerror：无法读取未定义的属性'top'”

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

URL ---启动日期时间选择器

<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
     });
 });

您的链接的引用似乎是导致此问题的原因，因为我使用您发布的引用对其进行链接时，它遇到了您遇到的相同错误，以下是我在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 dateTime选择器无法正常工作并且无法正常显示

1 个答案: