it-swarm.com.ru

JQuery Ui Datepicker месяц/год не работает в всплывающем окне в последнем Firefox

Каким-то образом мой jQuery UI Datepicker месяц/год не работает ни в одном всплывающем окне в последней версии Firefox.

Когда я нажимаю на выпадающий список Месяц или Год, список параметров не отображается.

Вот мой код Popup & Datepicker:

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

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

Я также подготовил демо на JSfiddle:

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

11
StormTrooper

Это потому, что модал заставляет сосредоточиться на себе. Вот решение для этого, как упомянуто здесь . Добавьте приведенный ниже скрипт в ваш файл js. Вот и все.

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

Ссылка: Твиттер загружает несколько модальных ошибок

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

Теперь я могу выбрать год :)

8
ShAkKiR

Великолепное всплывающее окно с 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);
};
1
Vasant Rajput

Идеальное решение - переместить всплывающее окно выбора даты в модальное диалоговое окно. 

$("#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

В моем случае я полагал, что средство выбора даты не работает, но на самом деле произошло то, что ранее использовавшаяся функция выбора даты (bootstrap-datepicker.js) имела приоритет над средством выбора даты jquery-ui.

0
Néstor Sánchez A.