Question

43

Bootstrap datepicker in modal not working

rated 0 times [ 44] [ 1] / answers: 1 / hits: 67718 / 8 Years ago, mon, february 8, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shane

Add To Favorites

Follow

Total Points: 239

Total Questions: 91

Total Answers: 114

Location: Faroe Islands

Member since Tue, Jul 7, 2020

4 Years ago

answered 8 Years ago dayanaracolleeng · Accepted Answer

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.