Почему jQuery UI datepicker не работает в модальном диалоговом окне jQuery? - PullRequest
Новая
       45

Почему jQuery UI datepicker не работает в модальном диалоговом окне jQuery?

13 голосов
/ 13 января 2010

Я хочу использовать указатель даты jQuery UI в одном из моих текстовых входов. Это в модальном диалоговом окне.

На самом деле, я могу вызвать datepicker при обычном вводе текста документа, и я получил свой календарь нормально, но я не могу этого сделать при вводе модального текста диалога (после перехвата внутри ввода модального текста я ничего не получил без какой-либо ошибки JavaScript).

Это мой код для вызова DatePicker: 

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

Я попытался изменить свойства Z-индекса css .ui-datepicker, но все равно ничего не получил.

У вас есть советы, как решить эту проблему?

С уважением,

в my_page.html у меня есть 

<code>function openSaisieARModal()
        {
            window_select_CodeAgence = new showModalWindow('SaisieARModal', 500);
        }

И я использую этот скрипт 

var showModalWindow=function(id, width)
{
    var newId=id+'Copy';
    this.id=newId;</p>

<pre><code>var previousNode=document.getElementById(newId);
if(previousNode!=null)
{
    previousNode.parentNode.removeChild(previousNode);
}

var rootNode=document.getElementsByTagName('body')[0];
this.node=document.createElement("div");
rootNode.appendChild(this.node);
this.node.setAttribute('id', newId);
this.node.setAttribute('title', document.getElementById(id).getAttribute('title'));
this.node.innerHTML=document.getElementById(id).innerHTML;
if(width==null)
{
    width=400;
}
$('#'+newId).dialog({autoOpen: true, modal: true, width:width });

this.closeWindow=function()
{
    $('#'+this.id).dialog('close');
}

this.centerContent=function()
{
    this.node.style.textAlign='center';
}

this.center=function()
{
    $('#'+this.id).dialog('option', 'position', 'center');
}

}

и это модальный HTML-код в my_page.html 

<div style="display:none;">
        <div id="SaisieARModal" title="DATE">
            <table class="tableFrame" cellspacing="0px" width="100%">
                <tr>
                    <td class="topLeft">

                    </td>
                    <td class="topCenter">

                    </td>
                    <td class="topRight">

                    </td>
                </tr>
                <tr>
                    <td class="middleLeft">

                    </td>
                    <td class="middleCenter">
                        <table>
                            <tr align="center">
                                <td>
                                    Date
                                </td>
                                <td>
                                    <input id="MyTextInputID" type="text"  />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="middleRight">

                    </td>
                </tr>
                <tr>
                    <td class="bottomLeft">

                    </td>
                    <td class="bottomCenter">

                    </td>
                    <td class="bottomRight">

                    </td>
                </tr>
            </table>
            <div>
            </div>
        </div>
</div>

Ответы [ 8 ]

17 голосов
/ 15 января 2010

Я смоделировал быстрый пример, который работает. Вы попытались изменить z-index на ui-datepicker, но после просмотра отрендеренного кода в Firebug, похоже, что нужный вам идентификатор - ui-datepicker-div. Я установил z-index на 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>
6 голосов
/ 24 февраля 2012

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

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

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

#ui-datepicker-div {z-index:1003 !important;}
2 голосов
/ 26 июля 2016

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

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

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

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

    'open: function () {' 

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

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

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

2 голосов
/ 16 июля 2011

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

#ui-datepicker-div {z-index:9999; clip:auto}
1 голос
/ 25 марта 2011

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

.ui-datepicker

класс от 

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

до 

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

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

0 голосов
/ 20 июня 2015

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

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

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

            });

});
0 голосов
/ 15 января 2010

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

до 

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

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

0 голосов
/ 13 января 2010

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

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

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

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

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

...