Use jQuery DatePicker in Bootstrap 3 modal
jquery-ui, jquery-ui-datepicker, twitter-bootstrap-3
Solution
I found the solution with this answer. The only option you needed is enforceFocus.
Working Demo
jQuery
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Problem
I would like to use jQuery UI datepicker in a modal. The real problem is that if I want to also show years and months, it shows me empty selects: Using firebug, it seems that the option tags are under the modal. This is my HTML: ``` <div class="modal-dialog"> <div class="modal-content"> <form id="add-form" action="#" method="post"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Add</h4> </div> <div class="modal-body"> <div class="input-group"> <div class="input-group"> <label for="date">Date</label> <input type="text" id="date" name="date" class="form-control datepicker"/> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button> <button type="submit" class="btn btn-primary">Salva</button> </div> </form> </div> </div> ``` Javascript: ``` $( ".datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', defaultDate: new Date(), changeMonth: true, changeYear: true }); $('.datepicker').css("z-index","0"); ``` I already tried this but it doesn't work (I have the same problem of giuseppe).