Question: 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>

Answer: 
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**](https://stackoverflow.com/questions/21059598/implementing-jquery-datepicker-in-bootstrap-modal) 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.
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