Bootstrap datepicker in modal not working

问题

I've tried to google and search SO for a similar question, but haven't found anything as of yet. I have an issue where I create and open a modal from jquery and try to access a date picker, however it doesn't activate the datepickers JS.

$("[id=add]").click(function () {
    $("#myModal .modal-header h4").html("Request for 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 about the long line length, however I have removed as much as I can - just showing the code which relates to the problem now.)

I have these scripts referenced at the 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 the same <script> </script> tag as the jquery function above, at the very top I 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 this code used in an similar way (except no jquery modal - simply on a cshtml page) that works correctly. I don't know why this way won't work. I've used developer tools to try to trace an issue, but there are no errors - the scripts load correctly however when clicking the Date Required it doesn't fire to the jquery for datepicker.

Am I using the Jquery html wrong to create the modal?

Cheers

回答1:

The datepicker is hiding behind the modal.

Set datepicker's z-index above the modal's which is 1050.

Additionally wrap your 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 for 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></form>');
  $("#myModal").modal("show");
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//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="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<style>
    .datepicker {
      z-index: 1600 !important; /* has to be larger than 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: I added bootstrap v3.3.6 CSS and removed the local reference to the tablesorter script for the demo.

回答2:

well you have to call the datepicker after modal loaded:

$("[id=add]").click(function() {

  $("#myModal .modal-header h4").html("Request for 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");

  $('#myModal').on('shown.bs.modal', function(e) {
    $('.input-group.date').datepicker({
      format: "dd/mm/yyyy",
      startDate: "01-01-2015",
      endDate: "01-01-2020",
      todayBtn: "linked",
      autoclose: true,
      todayHighlight: true
    });
  });

});

回答3:

You need to initiate the date picker on the Modal shown event

回答4:

$('#myModal').on('shown.bs.modal', function (e) {
     $('.date').datepicker();
});

回答5:

It works for me!

$('#modal_form_horizontal').on('shown.bs.modal', function() {
    $('.daterangepicker').css('z-index','1600');
}); 

回答6:

$(document).on('click','#add',function(){
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
  });
})

回答7:

It is caused by the z-index, By now you can set manually the z-index of the date picker in your styles.css

/*Date picker container*/ bs-datepicker-container { z-index: 3000; }

回答8:

By default, modal z-index is 2050. Your datepicker z-index should be more than modal z-index.

Like:

.datepicker {
    z-index: 2051 !important;
}

回答9:

When using bootstrap (tested with bootstrap 4.3.1) And jquery (3.4.1) jquery ui (1.12.1) for the datepicker and modal. The datepicker will work fine in a modal.

Except if u are also using the class form-control (bootstrap) in your element input. The css from bootstrap will set the input with the css position: relative. At this moment the datepicker will no longer will be visible.

A other fix to this issue wil be:

.form-control.datepicker  {position:unset}

or not using the form-control class

来源：https://stackoverflow.com/questions/35268857/bootstrap-datepicker-in-modal-not-working