Question

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

    $('.#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"
            });

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 -->

在注入的元素上激活bootstrap日期选择器

1 个答案: