Bootstrap Datepicker не отвечает - PullRequest
Новая
       38

Bootstrap Datepicker не отвечает

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

У меня есть загрузчик даты начальной загрузки в div.Все работает нормально, пока я не уменьшу размеры окна.Код следующий: 

<div class="col-md-3">
  <p> Pick a Date: </p>
  <div class="datepicker input-group" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>
<div class="col-md-3">
   <p>Choose a Campaign:</p>
   <select id="selectCampaign" class="form-control">
      <option value="opt1" id="opt1">opt1</option>
      <option value="opt2" id="opt2">opt2</option>
   </select>
</div>
<div class="col-md-3">
  <a class="btnSearch" href="#">Search</a>
</div>
$(document).ready(function () {
    $('.datepicker').datetimepicker({
        format: 'DD/MM/YYYY',
    });
});

Вот «ошибка»:
Here's the

Вот нормальное поведение приложения:
Here's the normal app behaviour

1 Ответ

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

Убедитесь, что вы используете последнюю версию начальной загрузки.В противном случае он должен работать как задумано.Обратитесь к моему ответу ниже.Надеюсь, это то, что вы ищете.

Редактировать Я думаю, основная ошибка, которую вы делаете, заключается в том, что вы не предоставляете идентификатор для средства выбора даты. Только когда идентификаторПри условии и называется, DatePicker собирается стать отзывчивым.Посмотрите фрагмент кода, который я изменил.

Определите идентификатор для средства выбора даты, как показано ниже. 

<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">

Фрагмент кода средства выбора даты 

$(document).ready(function() {
  $(function() {
    $('#datetimepicker1').datetimepicker({format: 'DD/MM/YYYY'});
  });
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<div class="col-md-3">
  <p> Pick a Date: </p>
  <div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>
<div class="col-md-3">
   <p>Choose a Campaign:</p>
   <select id="selectCampaign" class="form-control">
      <option value="opt1" id="opt1">opt1</option>
      <option value="opt2" id="opt2">opt2</option>
   </select>
</div>
<div class="col-md-3">
  <a class="btnSearch" href="#">Search</a>
</div>

Надеюсь, что это работает сейчас

...