Jquery Ui Datepicker 月/年下拉菜单在最新的 Firefox 中的弹出窗口中不起作用

Posted 2023-05-07

【中文标题】Jquery Ui Datepicker 月/年下拉菜单在最新的 Firefox 中的弹出窗口中不起作用

【英文标题】：Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox

【发布时间】：2015-07-05 10:34:03

【问题描述】：

不知何故，我的 jQuery UI Datepicker Month/Year Dropdown 在最新的 firefox 的任何弹出窗口中都不起作用。

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

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

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

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

我也在 JSfiddle 上准备了一个演示：

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

【参考方案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

【讨论】：

即使我不使用引导程序，我也遇到了问题。关于如何解决它的任何想法？ jQuery v1.12.4 和 jQuery UI v1.12.1

这给了我TypeError: $.fn.modal is undefined

【参考方案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'
);

现在我可以选择年份了 :)

【讨论】：

它节省了我的时间:)

很高兴它有帮助:)

最近尝试了FF，不知道，日期选择器不会改变FF中的月份/年份，但是这个解决方案，（第二部分）就像一个魅力！！

【参考方案3】：

理想的解决方案是在模式对话框中移动日期选择器弹出 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 链接以获取实际演示。

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

【讨论】：

就我而言，此解决方案有效，但会干扰对话框外的其他日期选择器。不知何故，在我打开模式对话框中的一个之后，我无法再打开另一个日期选择器。

在这种情况下，您需要在应用更改时保持选择性，例如 $("#datepicker.your-special-class").datepicker( beforeShow: function(el, dp) $(el).parent().append($('#ui-datepicker-div.your-special-class')); $('#ui-datepicker-div.your-special-class').hide();

不幸的是，它仍然不起作用。不知何故，$('#ui-datepicker-div.your-special-class') 不存在。即使我已将 your-special-class 类设置为我的日期选择器输入。

我也用你提供的 JsFiddle 试过了：jsfiddle.net/vdpgf3jm/1

【参考方案4】：

带有 jquery ui datepicker 的宏伟弹出窗口（启用了 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);
;

【讨论】：

我应该把这个放在哪里？内部 magnificPopup() 函数回调？

【参考方案5】：

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

【参考方案6】：

试试这个：

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

将强制显示无定义为：

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

【参考方案7】：

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

【参考方案8】：

我为嵌套在引导模式中的 jquery daterangepicker 提供了一个解决方案（问题：选择器月份/年份未出现在 FF 浏览器上）。解决方案是添加“parentEl”选项，指示要在其中初始化 daterangepicker 的模式：

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