Jquery Ui 日期选择器 month/year 下拉菜单在最新的 firefox 中无法在弹出窗口中工作

Question

我的 jQuery UI 日期选择器 Month/Year 下拉菜单在最新的 firefox 中无法在任何弹出窗口中工作。

当我点击月或年下拉菜单时，选项列表没有出现。

这是我的弹出窗口和日期选择器代码：

$( "#dialog-form" ).dialog({
    modal: true
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
});

我也在 JSfiddle 上准备了一个 demo:

http://jsfiddle.net/469zV/2/

Answer 1

这是因为模态强制关注自身。如前所述，这是解决方案 here 。将以下脚本添加到您的 js 文件中。就是这样。

jsfiddle：http://jsfiddle.net/surjithctly/93eTU/16/

参考：Twitter bootstrap multiple modal error

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

对于Bootstrap 4:

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

Answer 2

我不得不使用

$.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
  .off('focusin.bs.modal') // guard against infinite focus loop
  .on('focusin.bs.modal', $.proxy(function (e) {
    if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
      this.$element.focus()
    }
  }, this))
}

为了在我们使用 Tab 聚焦元素时限制模型内部的焦点（来自 GIT）。

试过这个>>

$("#dateOfBirth").datepicker({
    beforeShow: function(input, inst) {
        $(document).off('focusin.bs.modal');
    },
    onClose:function(){
        $(document).on('focusin.bs.modal');
    },
    changeYear: true,
    yearRange : '-150:+0'
});

现在我可以 select 年 :)

Answer 3

带 jquery ui 日期选择器的华丽弹出窗口（changemonth 和 changeyear 已启用）

试试这个代码

// Added to make calendar drop downs work properly
$.magnificPopup.instance._onFocusIn = function(e) {

    if( $(e.target).hasClass('ui-datepicker-month') ) {
        return true;
    }
    if( $(e.target).hasClass('ui-datepicker-year') ) {
        return true;
    }
    $.magnificPopup.proto._onFocusIn.call(this,e);
};

Answer 4

就我而言，我认为日期选择器失败了，但真正发生的是之前引用的日期选择器 (bootstrap-datepicker.js) 优先于 jquery- ui 日期选择器。

Answer 5

理想的解决方案是将日期选择器弹出窗口 div 移到模态对话框中。

$("#dialog-form").dialog({
    modal: true,
    width: 500,
    height: 500
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    beforeShow: function(el, dp) {
          $(el).parent().append($('#ui-datepicker-div'));
          $('#ui-datepicker-div').hide();
        }    
    }
});

注: 将不得不更新css一点。检查 jsfiddle link 以获取实际演示。

JsFiddle: http://jsfiddle.net/469zV/414/

Answer 6

在现代——2018 年，使用 Bootstrap 4.1——我能够通过简单地将 focus : false 传递给模态构造函数来解决这个问题。

Answer 7

试试这个：

beforeShow: function(el, dp) {
    uidp = $('#ui-datepicker-div').addClass('forced-display-none').detach();
    $(el).parent().append(uidp);
    setTimeout(function(){$(uidp).css({'position':'relative','left':'0px','top':'0px'}).removeClass('forced-display-none')},200);
}

将强制显示-none定义为：

.forced-display-none {display: none !important;}

Answer 8

我为 jquery 嵌套在 bootstrap 模态中的 daterangepicker 提供了一个解决方案（问题：选择器 month/years 未出现在 FF 浏览器中）。解决方案是添加“parentEl”选项，指示将在其中初始化daterangepicker的模态：

 $('#example-date-input').daterangepicker({
            parentEl: $('.modal-where-daterangepicker-should-be-nested'),
            .....
 });

Jquery Ui 日期选择器 month/year 下拉菜单在最新的 firefox 中无法在弹出窗口中工作

Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox

html

javascript

jquery

jquery-ui

datepicker