为啥 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用？

Posted 2023-05-07

【中文标题】为啥 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用？

【英文标题】：Why doesn't jQuery UI datepicker work in jQuery dialog modal?为什么 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用？

【发布时间】：2011-01-04 17:27:24

【问题描述】：

我想在我的一个文本输入中使用 jQuery UI 日期选择器。这是一个对话框模式。

事实上，我可以在普通文档文本输入中调用 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 代码

<div style="display:none;">
        <div id="SaisieARModal" title="DATE">
            <table class="tableFrame" cellspacing="0px" >
                <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>

【问题讨论】：

我假设您将值更改为 z-index (9999) 上相当大的值？

确实，但我也试过 1000 -> 1003 没有任何变化

您包含了调用日期选择器的代码，但没有说明它何时运行。我会检查 1) 它是否正在运行和 2) 它是否正在运行 在 创建模态并且 #MytextInputID 存在于 DOM 中，以便可以绑定 datepicker。 Firebug 断点可以帮助您解决这个问题。

你说点击给你一个javascript错误，你能更新问题并包括那个错误是什么吗？

致 Brian Pan 1) 是的，调用 datepicker 的代码正常运行导致它们在调用正常文本输入时没有问题（例如，任何文本输入不包括在我的模态中）2）它正在运行创建模态后，当我单击模态中包含的文本输入“MytextInputID”时调用 datepicker（因此在创建模态之前我无法调用 datepicker）

【参考方案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>

【讨论】：

这条线 $("#ui-datepicker-div").css("z-index", "9999"); 帮助了我的问题。谢谢。

+1 - 帮助我解决了我的问题 - 请记住，如果您的日期选择器仍然无法使用此修复程序工作，您可能需要通过 setTimeout() 在该 .css() 上稍微延迟 -因为我正在做相当多的 beforeShow: 活动，并且 .css() 在对话框构建之前正在运行。

【参考方案2】：

如果设置

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

不行，试试

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

【讨论】：

添加 !important 最终为我做了这件事。谢谢！

【参考方案3】：

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

您的日期选择器元素：

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

调用 open 函数来初始化对话框中的日期选择器：

'打开：函数（）'

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

无需任何调整即可完美运行。

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

【参考方案4】：

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

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

【参考方案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; 

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

【参考方案6】：

你能澄清一下你指的是哪个“模态对话框”吗？我假设它是这个：

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

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

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

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

【参考方案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"););
    );

是否显示警报？

【参考方案8】：

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

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

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

            );

);

【讨论】：

你能解释一下你的答案吗？目前尚不完全清楚这是如何解决这个问题的。