datepicker -

  显示原文与译文双语对照的内容
0 0

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

事实上,我可以在正常的文档文本输入中调用 datepicker,我通常会得到我的日历,但我不能在对话框模式文本输入( 在clinking模式文本输入之后,我没有任何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');
}
 
 
%7D
这是 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>
时间:原作者:11个回答

0 0

我设计了一个简单的例子。 你尝试在 ui-datepicker 上更改 z-index,但在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>
原作者:
0 0

如果设置

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

不工作,试试

#ui-datepicker-div {z-index:1003!important;}
原作者:
0 0

在我的例子中,我使用的是 ZendX 。 我添加了以下css来修复剪辑样式:

#ui-datepicker-div {z-index:9999; clip:auto}
原作者:
0 0

在 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 0

你能阐明你指的是哪个'模态对话框'。 我假设它是这样的:

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

不看你的代码,它的难度很大。 如果你发布附带的HTML,它可能很有用。

不过,要记住的一点是,模式对话框给出了你正在打开一个新窗口的印象,但是实际上,内容在同一个HTML文档中作为内容的其余部分。 例如在分配元素id时可能会导致混淆,例如某些重复项可能被指定。

我也假设你已经调试过了你确信选择的范围是正确的,换句话说,正在选择你想要的项目。

原作者:
0 0

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

警报出现了?

原作者:
...