Implementing jQuery DatePicker in Bootstrap modal

Question

Created jsfiddle for my issue http://jsfiddle.net/sudiptabanerjee/93eTU/

In modal window issue is on Change Month and Change Year combos.

a) IE 11: everythin

Answer 1

Building off of Surjith's answer, I added a try/catch block to resolve a ReferenceError exception for confModal being undefined.

Coffeescript:

enforceModalFocusFn = $.fn.modal.Constructor::enforceFocus

$.fn.modal.Constructor::enforceFocus = ->

try
  $confModal.on "hidden", ->
    $.fn.modal.Constructor::enforceFocus = enforceModalFocusFn
    return
  $confModal.modal backdrop: false
catch error
  if error.name != 'ReferenceError'
    throw error

Answer 2

Another workaround for this issue is removing tabindex="-1" attribute on your div.modal element.Tested on bootstrap 4.

Answer 3

add z-index to your datepicker class

Answer 4

jQuery version of @crftr answer

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
try{
    $confModal.on('hidden', function() {
        $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
    });
    $confModal.modal({ backdrop : false });
}
catch (error) {
    if(error.name != 'ReferenceError')
        throw error;
}

Answer 5

MORE EASY... just need to comment this line into your boostrap.js that.enforceFocus().

Answer 6

Found an easier way to fix this datepicker issue. Make sure the JS is below jquery, jqueryUI lib calls.

$("body").delegate("#date1", "focusin", function () {
      $(this).datepicker(
        {
          dateFormat: "yy-mm-dd",
          changeMonth: true,
          changeYear: true
        }
      );

});

$( "#date1" ).datepicker();