javascript - Bootstrap datepicker in modal not working -

i've tried google , search similar question, haven't found of yet. have issue create , open modal jquery , try access date picker, doesn't activate datepickers js.

$("[id=add]").click(function () {     $("#mymodal .modal-header h4").html("request change");     $("#mymodal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">date required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="daterequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');     $("#mymodal").modal("show"); }); 

(apologies long line length, have removed as can - showing code relates problem now.)

i have these scripts referenced @ top:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <script src="~/scripts/jquery.tablesorter.min.js"></script> 

and in same <script> </script> tag jquery function above, @ top have:

$('.input-group.date').datepicker({     format: "dd/mm/yyyy",     startdate: "01-01-2015",     enddate: "01-01-2020",     todaybtn: "linked",     autoclose: true,     todayhighlight: true }); 

i have code used in similar way (except no jquery modal - on cshtml page) works correctly. don't know why way won't work. i've used developer tools try trace issue, there no errors - scripts load correctly when clicking date required doesn't fire jquery datepicker.

am using jquery html wrong create modal?

cheers

the datepicker hiding behind modal.

set datepicker's z-index above modal's 1050.

additionally wrap datepicker code in bootstrap's modal shown event.

$('#mymodal').on('shown.bs.modal', function() {    $('.input-group.date').datepicker({      format: "dd/mm/yyyy",      startdate: "01-01-2015",      enddate: "01-01-2020",      todaybtn: "linked",      autoclose: true,      todayhighlight: true,      container: '#mymodal modal-body'    });  });    $("[id=add]").click(function() {    $("#mymodal .modal-header h4").html("request change");    $("#mymodal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">date required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="daterequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');    $("#mymodal").modal("show");  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>    <style>      .datepicker {        z-index: 1600 !important; /* has larger 1050 */      }  </style>    <div class="well">    <button type="button" id="add">add</button>  </div>  <div id="mymodal" class="modal">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <h4></h4>        </div>        <div class="modal-body">        </div>      </div>    </div>  </div>

note: added bootstrap v3.3.6 css , removed local reference tablesorter script demo.