Почему средство выбора даты пользовательского интерфейса jQuery не работает в модальном диалоговом окне jQuery?

Я смоделировал быстрый пример, который работает. Вы пытались изменить z-индекс на ui-datepicker, но после просмотра отрендеренного кода в Firebug он выглядит так, как будто вам нужен идентификатор ui-datepicker-div. Я установил z-индекс на 9999, и он появляется поверх модального диалога.

<script type='text/javascript'> 
  $(function() {
      $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
  });

  function openmodal() {   
      var $dialogContent = $("#event_edit_container");       

      $dialogContent.dialog({
         modal: true,
         title: "Test",
         close: function() {},
         buttons: {
          save : function() {},
          cancel : function() {}
         }
      }).show();
      $("#ui-datepicker-div").css("z-index", "9999");   
  }
</script>

<div ><a href="javascript:openmodal();">Open modal</a></div>
<div id="event_edit_container" >
    <form>
        Date: <input type="text" id="datepicker" name="datepicker">
    </form>
</div>

Если установка

#ui-datepicker-div {z-index:1003;} 

не работает, попробуй

#ui-datepicker-div {z-index:1003 !important;}

Инициализируйте средство выбора даты в функции open вашего модального диалогового окна, как показано ниже:

1. Ваш элемент выбора даты:

   <input type="text" id="myDateStr"/>

2. Вызов из функции open для инициализации средства выбора даты из диалогового окна:

   'открыть: функция () {'

       $('#myDateStr').datepicker
       ({
                             dateFormat: 'mm/dd/yy',
                             changeMonth: true,
                             changeYear: true,
                           });
       }
   

Это работало отлично без каких-либо настроек.

Нет необходимости изменять какой-либо существующий класс или стиль CSS, чтобы изменить z-индекс.

В моем случае я использовал помощник ZendX Jquery. Я добавил следующий css, чтобы исправить стиль клипа:

#ui-datepicker-div {z-index:9999; clip:auto}

В jquery-ui-1.8.1.custom.css (или любой другой версии jquery ui) измените

.ui-datepicker

класс из

{ width: 17em; padding: .2em .2em 0; }

to

{ width: 17em; padding: .2em .2em 0; z-index:99999; }

Это сработало для меня, и средство выбора даты отлично работает внутри модального диалога!

Не могли бы вы уточнить, о каком «модальном диалоге» вы говорите. Я предполагаю, что это один:

http://docs.jquery.com/UI/Dialog

Не видя больше вашего кода, это сложно. Может быть полезно, если вы опубликуете сопроводительный HTML.

Однако следует помнить одну вещь: модальное диалоговое окно создает впечатление, что вы открываете новое окно, однако на самом деле содержимое находится в том же HTML-документе, что и остальная часть вашего содержимого. Это часто может привести к путанице при назначении идентификаторов элементов, например, могут быть указаны некоторые дубликаты.

Я также предполагаю, что вы отладили/протестировали до такой степени, что уверены, что ваш селектор работает правильно, т.е. выбирает элементы, которые вы намереваетесь

enter code hereЕсли упростить (для теста)

$('#'+newId).dialog({autoOpen: true, modal: true, width:width }); 

и сделать это:

$('#SaisieARModal').dialog({autoOpen: true, modal: true, width:width }); 

модал появляется? Также вы пробовали вариант bgiframe: true?

Не уверен, что что-то из этого полностью уместно, но что-то (скорее всего) ставит средство выбора даты где-то за модальными вещами.

РЕДАКТИРОВАТЬ: Еще одна вещь, если вы измените:

$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); });

to

    $(function() { 
       $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
       $("#MytextInputID").click(function(){alert("working");});
    });

предупреждение появляется?

В моем случае ниже работает лучше

$(document).on("click", ".modal-body", function () {

    $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd'

            });

});