Use jQuery DatePicker in Bootstrap 3 modal

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:

Answer 1

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 = '
'
+'
'
+ 'Date'    
+ ''
+ '
'
+ '
';

  var object = $('
').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;
}

View modal with date