javascript - 在注入(inject)的元素上激活 Bootstrap 日期选择器

Question

我在页面加载后向模式添加输入字段。它应该绑定(bind)到日期选择器，如下所示。

    $('.#example1').datepicker({
                format: "dd/mm/yyyy"
            });

这是行不通的。如果我在页面和输入可见后在 chrome 控制台中运行此代码，它就没有问题。我通常会按如下方式更改注入(inject)元素上的代码......

 $(document).on( "click","#example1", function() { ....

但不确定如何使用我尝试过的日期选择器来做到这一点

       $('.modal-body .#example1').datepicker({
                format: "dd/mm/yyyy"
            });

和

   $('document .#example1').datepicker({
                format: "dd/mm/yyyy"
            });

Answer 1

我认为您需要确保在添加 <input> 后初始化日期选择器。字段到模态对话框。也许这个例子可能会有所帮助。

function injectDatePicker() {
  var input = $('<input />');
  input.datepicker({
    format: "dd/mm/yyyy"
  });
  
  $('#mountPoint').append(input);
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>


<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button class="btn btn-default" onclick="injectDatePicker()">Inject Date Picker</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal</h4>
      </div>
      <div class="modal-body">
        <div id="mountPoint"></div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->