web-dev-qa-db-ja.com

jquery Ui Datepickerの月/年のドロップダウンが最新のFirefoxのポップアップで機能しない

どういうわけか、私のjQuery UI Datepickerの月/年ドロップダウンが最新のFirefoxのポップアップで機能しません。

月または年のドロップダウンをクリックしても、オプションリストが表示されません。

これが私のポップアップと日付ピッカーのコードです：

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

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

JSfiddleでもデモを準備しました。

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

javascriptjqueryhtmljquery-uidatepicker
15
StormTrooper

これは、モーダルが自分自身に焦点を合わせているためです。これは前述の 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
19
Vijay

私は使用しなければなりませんでした

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

年を選択できるようになりました:)

10
ShAkKiR

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);
};
1
Vasant Rajput

理想的な解決策は、モーダルダイアログ内で日付ピッカーポップアップ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/

1
maximus ツ

現代では-2018、Bootstrap 4.1-を使用して-focus : falseをモーダルコンストラクターに渡すだけでこれを解決できました。

1
David

私の場合、datepickerが失敗していると思っていましたが、実際に起こったことは、以前に参照されたdatepicker（bootstrap-datepicker.js）がjquery-ui datepickerよりも優先されたということです。

0
Néstor Sánchez A.