Month select in datepicker inside a bootstrap-modal won't work in Firefox

Question

The month select in the datepicker doesn\'t work in FireFox if it is within a bootstrap-modal.

Click Me         


        

Answer 1

I had this same problem, but it was because I had padding on the input boxes. Once removed it fixed everything. Which makes me think I hate Firefox even though this was my fault. :P

Answer 2

First Try to detect only firefox browser

	if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
		$.fn.modal.Constructor.prototype.enforceFocus = function (){};
	}

Answer 3

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.