在注入的元素上激活引导日期选择器答案

【问题标题】：Activate bootstrap date picker on injected element在注入的元素上激活引导日期选择器
【发布时间】：2015-06-21 06:17:07
【问题描述】：

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

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

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

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

但不确定如何使用我尝试过的日期选择器

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

和

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案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 -->

【讨论】：