Bootstrap DateTime Picker не работает и не отображается должным образом - PullRequest
Новая
       33

Bootstrap DateTime Picker не работает и не отображается должным образом

0 голосов
/ 22 мая 2019

На моей странице я использую многопользовательский инструмент выбора jQuery в двух полях ввода, а в некоторых других полях ввода я использую загрузчик даты и времени начальной загрузки.Но я сталкиваюсь со многими проблемами:

1) Boostrap. Выбор даты и времени не работает должным образом, не отображается в нужном месте, где я хочу, и отображается сообщение об ошибке в консоли:"uncaught typeerror: not read property 'top 'of undefined "

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>

снимок экрана ошибки в консоли

Пожалуйста, помогите мне, я много искал, но не смог ее решить.

Заранее спасибо...

1 Ответ

0 голосов
/ 23 мая 2019

см. Ниже 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>
...