Use jQuery DatePicker in Bootstrap 3 modal - jquery-ui

Question

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).

Answer 1

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() {};

Answer 2

Only had to add this style:
<style>
.ui-datepicker{
z-index: 9999999 !important;
}
</style>

Answer 3

i could not get $.fn.modal.Constructor.prototype.enforceFocus = function() {}; to work becuase the 'focusin.bs.modal' event was already attached to the modal.
this is the code i got to work; because the date picker is called after the modal opens. using the beforeShow() and onClose function i was able to turn the focus event off and on
var datepicker_opts = {
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
altFormat: "yymmdd",
setDate: new Date(),
maxDate: new Date()
};
BootboxContent = function(){
var frm_str = '<form id="some-form">'
+'<div class="form-group">'
+ '<label for="date">Date</label>'
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';
var object = $('<div/>').html(frm_str).contents();
object.find('.date').datepicker(
$.extend({
beforeShow: function(elem, inst) {
$(document).off('focusin.bs.modal');
},
onClose: function(selectedDate, inst) {
$modal = $(inst.input[0]).closest(".modal").data('bs.modal');
$modal.enforceFocus();
}
}, datepicker_opts)
);
return object
}
$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: BootboxContent,
title: "View modal with date",
buttons: {
cancelar: {
label: "Cancel",
className: "btn-default"
}
}
});
}); //End click
.hidden-form #add_class_form {
display:none;
}
.ui-datepicker{
z-index: 9999999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>