CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
maxum
maxum

Reputation: 2915

Activate bootstrap date picker on injected element

I am adding a input field to a modal after the page has loaded. It should be bound to a date picker as follows. 

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

This does not work. If I run this code in chrome console after the page and input is visible it works not problem. I would usually change the code on an injected element as follows....

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

But not sure how to do it with the date picker I have tried

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

and

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

Upvotes: 2

Views: 550

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

I think you need to make sure that the datepicker is initialized after adding the <input> field to the modal dialog. Perhaps this example might help.

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

Upvotes: 1

Related Questions