为什么'；jQuery UI日期选择器在jQuery对话框模式中工作？

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

事实上，我可以在正常的文档文本输入中调用datepicker，并且我可以正常地获取日历，但在对话框模式文本输入中我不能这样做（在模式文本输入中敲响后，我没有得到任何JavaScript错误）

这是我调用datepicker的代码：

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

我试图更改css.ui日期选择器Z-index属性，但仍然一无所获

您有解决此问题的提示吗

问候,

---

在my_page.html中，我有

}

这是my_page.HTML中的模式HTML代码

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

日期

您能否澄清您所指的是哪种“模式对话框”。我假设是这样的：

如果看不到更多的代码，这将很困难。如果您发布附带的HTML，它可能会很有用

但是，需要记住的一点是，模式对话框给您的印象是您正在打开一个新窗口，但实际上内容与其他内容在同一个HTML文档中。在分配元素ID时，这通常会导致混淆，例如，可能会指定一些重复项

---

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

如果简化（用于测试），请在此处输入代码

并使之：

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

模态出现了吗？ 您还尝试过

bgiframe:true

选项吗

不确定这一切是否完全相关，但某种东西（很可能）把日期选择器放在了某个地方

编辑：另一件事，如果您更改：

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

到

---

警报出现了吗？

我模拟了一个有效的快速示例。您尝试更改

ui-datepicker

上的z索引，但在Firebug中查看呈现的代码后，您想要的id似乎是

ui-datepicker-div

。我将z索引设置为9999，它显示在模态对话框的顶部

.ui-datepicker

$（函数（）{
$（“#datepicker”）.datepicker（{dateFormat:'dd/mm/yy'}）；
});
函数openmodal（）{
var$dialogContent=$（“#事件_编辑_容器”）；
$dialogContent.dialog({
莫代尔：是的，
标题：“测试”，
关闭：函数（）{}，
按钮：{
保存：函数（）{}，
取消：函数（）{}
}
}).show（）；
$（“#ui datepicker div”）.css（“z-index”，“9999”）；
}
日期：

在jquery-ui-1.8.1.custom.css（或任何版本的jquery-ui）中修改

来自

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

到

---

这对我来说很有用，日期选择器在模态对话框中工作得很好

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

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

如果设置

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

不行，试试看

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

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

            });

});

---

在我的例子中，下面的方法效果更好

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

在模式对话框窗口的“打开”功能中初始化日期选择器，如下所示：

您的日期选择器元素：

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

'打开：函数（）{'

这是完美的工作没有任何调整

---

无需更改任何现有css类或样式即可更改z索引。

我假设您将z索引上的值更改为相当大的值（9999）确实，但我也尝试了1000->1003，没有做任何更改。您包含了调用日期选择器的代码，但没有说明它何时运行。我会检查1）它是否正在运行，2）它是否在创建模式后运行，并且#MytextInputID存在于DOM中，以便可以绑定日期选择器。Firebug断点可以帮助您完成此操作。您说的是clicking给了你一个javascript错误，你能更新这个问题并包括这个错误是什么吗？对Brian Pan 1）是的，调用datepicker的代码运行正常，因为它们在调用正常文本输入时没有问题（例如，我的模式中不包括的任何文本输入）2）对于corse，它在创建模式后运行，因为当我单击模式中包含的文本输入“MytextInputID”时调用datepicker（因此在创建模式之前我不能调用datepicker），这一行

$（“#ui datepicker div”）.css（“z-index”，“9999”）；

帮助解决了我的问题。谢谢。+1-帮助我解决了我的问题-请记住，如果您的日期选择器仍然无法使用此修复程序，您可能需要通过setTimeout（）对该.css（）进行一点延迟-就像我在show:activity和.css（）之前做的那样在创建对话框之前正在运行。您能解释一下您的答案吗？现在还不完全清楚这是如何解决问题的。添加！重要的是最终为我做了什么。谢谢！

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

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

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

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

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

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

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

            });

});

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