Month select in datepicker inside a bootstrap-modal won't work in Firefox
bootstrap-modal, jquery-ui-datepicker, twitter-bootstrap
Solution
I found two fixes for this bug:
Fix 1: If you remove the tabindex attr in div.modal, the month select works just fine. The only issue I had with this solution is that, on IE (any version) you still need to double-click the month dropwdown for it to open up.
Fix2: The second solution you can find at: http://jsfiddle.net/nKXF2/1/ By overriding the enforceFocus function which was proposed in this question also, you get the month dropdown to work again.
$('#modal').on('show', function () {
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
});
I think this second one is the best.
Problem
The month select in the datepicker doesn't work in FireFox if it is within a bootstrap-modal. ``` <button class="btn" id="btn">Click Me</button> <div class="modal hide" id="modal" tabindex="-1"> <div class="modal-body"> <input type="text" id="datepicker" /> </div> </div> ``` JavaScript: ``` $("#datepicker").datepicker({"changeMonth": true}); $('#btn').click(function() { $("#modal").modal('show'); }); ``` Here is a minified example: http://jsfiddle.net/nKXF2/ I found a simmilar twitter-bootstrap github issue: https://github.com/twbs/bootstrap/issues/5979