Question

我想在我的一个文本输入中使用jQuery UI datepicker。这个是一个对话模式。

事实上，我可以在正常的文档文本输入中调用datepicker并且我正常地得到了我的日历，但我不能在对话模式文本输入中做到这一点（在模态文本输入内部克隆之后我没有任何JavaScript错误）。

这是我调用datepicker的代码：

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

我尝试更改css .ui-datepicker Z-index属性但我仍然没有。

您有解决此问题的提示吗？

此致

在my_page.html中我有

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

我使用这个脚本

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


}

这是my_page.html

中的模态HTML代码

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

Answer 1

我嘲笑了一个有效的简单例子。您尝试更改ui-datepicker上的z-index，但在查看Firebug中呈现的代码后，您看起来想要的ID是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>

Answer 2

如果设置

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

不起作用，请尝试

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

Answer 3

在我的情况下，我使用的是ZendX Jquery助手。我添加了以下css来修复剪辑样式：

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

Answer 4

在模态对话框窗口的打开函数中初始化日期选择器，如下所示：

您的日期选择元素：

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

从打开函数调用以从对话框初始化日期选择器：

＆＃39; open：function（）{＆＃39;

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

这完美无需任何调整。

无需更改任何现有的css类或样式来更改z-index。

Answer 5

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

这对我有用，日期选择器在模态对话框中效果很好！

Answer 6

您能否澄清一下您所指的“模态对话框”。我假设这个：

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

没有看到更多的代码，很难。如果您发布随附的HTML可能会有用。

但有一点需要注意的是，模态对话框会让您觉得您正在打开一个新窗口，但实际上内容与您内容的其他内容位于同一HTML文档中。在分配元素ID时，这通常会导致混淆，例如，可能会指定一些重复项。

我还假设您已调试/测试到您确定选择器正常工作的程度，即选择您想要的项目

Answer 7

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

警报出现了吗？

Answer 8

在我的情况下，以下效果更好

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

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

            });

});

为什么jQuery UI datepicker不能在jQuery对话框模式中工作？

8 个答案: