Question

我正在尝试使用Bootstrap Datepicker，但似乎无法正常工作。

我将脚本添加到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>

Answer 1

您应该在生成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>

Bootstrap Datepicker未显示

1 个答案: