I face this problem today when I try to show datepicker on Bootstrap Modal.

I'm using bootstrap-datepicker as datepicker library.

Here is my modal form :

<div class="form-group">
     <label for="message-text" class="control-label">Start Date</label>
          <div class="input-group date">
               <div class="input-group-addon">
                   <i class="fa fa-calendar"></i>
               </div>
               <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
           </div>
</div>

And here is my datepicker script :

$('#datepicker2').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd',
        zIndexOffset: 10000
    });

I already using zIndexOffset but it's not working, the calendar still shown behind the modal.

Can anyone suggest the solution ?

Thank you.

I face this problem today when I try to show datepicker on Bootstrap Modal.

I'm using bootstrap-datepicker as datepicker library.

Here is my modal form :

<div class="form-group">
     <label for="message-text" class="control-label">Start Date</label>
          <div class="input-group date">
               <div class="input-group-addon">
                   <i class="fa fa-calendar"></i>
               </div>
               <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
           </div>
</div>

And here is my datepicker script :

$('#datepicker2').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd',
        zIndexOffset: 10000
    });

I already using zIndexOffset but it's not working, the calendar still shown behind the modal.

Can anyone suggest the solution ?

Thank you.

• javascript
• jquery
• twitter-bootstrap
• jquery-ui
• datepicker

• Have you tried using the option container, adding the date picker inside the modal? – visola Commented Jun 19, 2016 at 10:56
• @visola not yet, where's the container option should i put ? – Code On Commented Jun 19, 2016 at 11:06
• This is the option: bootstrap-datepicker.readthedocs.io/en/latest/… – visola Commented Jun 19, 2016 at 11:08
• i put in container but it's still not work – Code On Commented Jun 19, 2016 at 11:31

3 Answers 3

You should try adding the date picker container inside the modal div. You could give the modal an id like this:

<div class="form-group" id="myModalWithDatePicker">
  <label for="start_date" class="control-label">Start Date</label>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </div>
    <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
  </div>
</div>

Then you can use the container option like the following:

$('#datepicker2').datepicker({
    autoclose: true,
    container: '#myModalWithDatePicker',
    format: 'yyyy-mm-dd'
});

I used this option to fix.

.modal-open .ui-datepicker{z-index: 2000!important}

this option has been applied when modal open (class modal-open added to body)

This work fine for me... just add the style

<style>
    /* style sici */
    .datepicker {
      z-index: 1600 !important;
    }
   
</style>