为什么 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2058360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't jQuery UI datepicker work in jQuery dialog modal?
提问by aa th
I want to use jQuery UI datepicker in one of my text inputs. This one is in a dialog modal.
我想在我的文本输入之一中使用 jQuery UI datepicker。这是一个对话框模式。
In fact, I can call datepicker in the normal document text inputs and i got my calender normally but I can't do that in dialog modal text inputs (after clinking inside modal text input I got nothing without any JavaScript error).
事实上，我可以在普通文档文本输入中调用 datepicker 并且我可以正常获取日历，但是我不能在对话框模式文本输入中这样做（在模态文本输入中叮当响之后，我什么也没有，没有任何 JavaScript 错误）。
This is my code to call datepicker :
这是我调用 datepicker 的代码：
$(function() {
$("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
);
I tried changing css .ui-datepicker Z-index properties but I still got nothing.
我尝试更改 css .ui-datepicker Z-index 属性，但仍然一无所获。
Do you have tips to fix this problem ?
你有解决这个问题的技巧吗？
Regards,
问候，
in my_page.html i have
在 my_page.html 我有
function openSaisieARModal()
{
window_select_CodeAgence = new showModalWindow('SaisieARModal', 500);
}And i use this 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');
}
}
and this is the modal HTML code in my_page.html
这是 my_page.html 中的模态 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>
回答by Scott Gottreu
I mocked up a quick example that works. You tried changing the z-index on ui-datepickerbut after looking through the rendered code in Firebug it looks like the id you want is ui-datepicker-div. I set the z-index to 9999 and it appears on top of the modal dialog.
我模拟了一个有效的快速示例。您尝试更改 z-index，ui-datepicker但在查看 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>
回答by user914796
If setting
如果设置
#ui-datepicker-div {z-index:1003;}
doesn't work, try
不行，试试
#ui-datepicker-div {z-index:1003 !important;}
回答by manojR
Initialize date picker in openfunction of your modal dialog window as below:
在模态对话框窗口的打开功能中初始化日期选择器，如下所示：
Your date picker element:
<input type="text" id="myDateStr"/>Call from openfunction to initialize the datepicker from dialog box:
'open: function () {'
$('#myDateStr').datepicker ({ dateFormat: 'mm/dd/yy', changeMonth: true, changeYear: true, }); }
您的日期选择器元素：
<input type="text" id="myDateStr"/>从open函数调用以从对话框初始化日期选择器：
'打开：函数（）{'
$('#myDateStr').datepicker ({ dateFormat: 'mm/dd/yy', changeMonth: true, changeYear: true, }); }
This worked perfectly without any tweaks.
这工作完美，没有任何调整。
No need to change any existing css class or style to change the z-index.
无需更改任何现有的 css 类或样式即可更改 z-index。
回答by fredcallagan
In my case I Was using ZendX Jquery helper. I have added the following css to fix the clip style:
就我而言，我使用的是 ZendX Jquery 助手。我添加了以下 css 来修复剪辑样式：
#ui-datepicker-div {z-index:9999; clip:auto}
回答by Nikolaevich Mijakovich
In jquery-ui-1.8.1.custom.css (or whatever version of jquery ui you have) modify
在 jquery-ui-1.8.1.custom.css ( 或者你拥有的任何版本的 jquery ui ) 中修改
.ui-datepicker
class from
班级来自
{ width: 17em; padding: .2em .2em 0; }
to
到
{ width: 17em; padding: .2em .2em 0; z-index:99999; }
That worked for me and date picker works excellent inside modal dialog!
这对我有用，日期选择器在模态对话框中效果很好！
回答by James Wiseman
Can you clarify which 'modal dialog' you are referring to. I'm assuming its this one:
您能否澄清您指的是哪个“模态对话框”。我假设它是这个：
http://docs.jquery.com/UI/Dialog
http://docs.jquery.com/UI/Dialog
Without seeing more of your code, its difficult. It might be useful if you post the accompanying HTML.
没有看到更多的代码，这很困难。如果您发布随附的 HTML，它可能会很有用。
One thing to remember however, is that the modal dialog gives you the impression that you are opening a new window, however in reality the content is in the same HTML document as the rest of your content. This can often lead to confusion when assigning element IDs, for example, some duplicates may be specified.
但是要记住的一件事是，模态对话框给您的印象是您正在打开一个新窗口，但实际上内容与其余内容位于同一个 HTML 文档中。这在分配元素 ID 时通常会导致混淆，例如，可能会指定一些重复项。
I'm also assuming that you've debugged/tested to the extent that you are sure your selector is working correctly, i.e. is selecting the item(s) that you intend
我还假设您已经调试/测试到您确定选择器工作正常的程度，即正在选择您想要的项目
回答by Mark Schultheiss
enter code hereIf you simplify (for a test)
enter code here如果你简化（为了测试）
$('#'+newId).dialog({autoOpen: true, modal: true, width:width });
and make it:
并使它：
$('#SaisieARModal').dialog({autoOpen: true, modal: true, width:width });
does the modal show up?
Also have you tried the bgiframe: trueoption?
模态出现了吗？您是否也尝试过该bgiframe: true选项？
Not sure any of this is totally relevent, but something is putting (most likely) the date picker behind the modal stuff somewhere.
不确定这些是否完全相关，但是有些东西（很可能）将日期选择器放在某个地方的模态后面。
EDIT: One other thing, if you change:
编辑：另一件事，如果你改变：
$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); });
to
到
$(function() {
$("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
$("#MytextInputID").click(function(){alert("working");});
});
does the alert show up?
警报是否出现？
回答by Gabriela Macias
In My case, the below works better
在我的情况下，下面的效果更好
$(document).on("click", ".modal-body", function () {
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
});
