在bootstrap-modal中的datepicker中的月份选择在Firefox中不起作用

时间:2014-02-26 18:56:38

标签: twitter-bootstrap jquery-ui-datepicker bootstrap-modal

如果日期选择器中的月份选择在引导模式中,则它在FireFox中不起作用。

<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');
});

这是一个缩小的例子:http://jsfiddle.net/nKXF2/

我找到了一个类似的twitter-bootstrap github问题:https://github.com/twbs/bootstrap/issues/5979

3 个答案:

答案 0 :(得分:19)

我发现了两个针对此错误的修复程序:

修复1:如果删除div.modal中的tabindex attr,则月份选择工作正常。 我对此解决方案唯一的问题是,在IE(任何版本)上,您仍然需要双击月份下拉菜单才能打开它。

修复2:您可以在以下位置找到第二个解决方案:http://jsfiddle.net/nKXF2/1/通过覆盖this question中提出的enforceFocus函数,您可以再次使用月份下拉列表。

$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});

我认为第二个是最好的。

答案 1 :(得分:0)

我有同样的问题,但那是因为我在输入框上填充了。一旦删除它修复了一切。这让我觉得我讨厌Firefox,尽管这是我的错。 :P

答案 2 :(得分:0)

首先尝试仅检测firefox浏览器

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