Bootstrap Datepicker не отображается - PullRequest
Новая
       10

Bootstrap Datepicker не отображается

0 голосов
/ 09 июня 2019

Я пытаюсь использовать загрузчик даты начальной загрузки и не могу заставить его работать.

Я добавляю скрипт в заголовок для указателя даты, а в теле у меня есть функция для генерации более 1 даты. DatePicker не будет отображаться только и пустое поле. Ввод даты не возможен, так как он не работает в сафари. 

<script src="Date/css/datepicker.css"></script>
  <script src="Date/js/bootstrap-datepicker.js"></script>
  <script>
    $(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy'
    });
});
  </script>
<div class="col-md-12">
                <div id="content" class="text"></div>

                <script>
                    function myFunction(){
                    var n = Number(document.getElementById("nbchambre").value);
                    var content = document.getElementById('content');
                    content.innerHTML="";
                    for(var count = 1; count < n+1; count++){
                    var div = document.createElement('div');
                    div.innerHTML = '<div class="col-md-3" class="title">Car ' + count + ' : </div>' +'<div class="col-md-3"> <input class="datepicker text centered valid" type="text" value="" name="date" id="car' + count + '" required> </div';
                    content.appendChild(div);
                        }
                    }

                </script>


            </div>

1 Ответ

2 голосов
/ 09 июня 2019

Вы должны поставить скрипт выбора даты после генерации HTML, поэтому попробуйте эту финальную версию:

$(document).ready(function() {
    var content = document.getElementById('content');
    content.innerHTML="";
    for(var count = 1; count < 5; count++) {
      var div = document.createElement('div');
      div.innerHTML = `
        <div class="col-md-3" class="title">Car ${count} : </div>
        <div class="col-md-3"> 
        <input class="datepicker text centered valid" type="text" value="" name="date" required /> 
  </div>`;
      content.appendChild(div);
    }
  
  $('.datepicker').datepicker({
    format: 'mm-dd-yyyy'
  });
});
<link href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <div id="content"></div>
  </div>
</div>
...