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

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

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

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

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

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

У вас есть советы по устранению этой проблемы?

Привет,

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

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

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

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

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>

Ответы

Ответ 1

Я издевался над быстрым примером, который работает. Вы попытались изменить z-индекс на 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>

Ответ 2

Если параметр

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

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

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

Ответ 3

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

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

Ответ 4

В 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; }

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

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

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

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

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

EDIT: Еще одна вещь, если вы меняете:

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

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

появляется оповещение?

Ответ 7

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

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

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

            });

});

Ответ 8

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

Элемент выбора даты:

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

Вызов из функции open для инициализации диалогового окна datepicker:

'open: function() {'

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

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

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