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: everything is working as expected b) Chrome Version 31, On month combo select, bootstrap modal hides. c) Firefox v26, Month and Year dropdown is not functional. Please help. HTML ```

Accepted Answer

This is because the modal enforces focus on itself. Here is a solution for this as mentioned here . Add the below script to your js file. That's it.

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
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

$confModal.modal({ backdrop : false });
```

For Bootstrap 4:

```
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
```

Implementing jQuery DatePicker in Bootstrap modal

Solution

Problem

Related problems