jQuery UI datepicker 在对话框中自动打开
Posted
技术标签:
【中文标题】jQuery UI datepicker 在对话框中自动打开【英文标题】：jQuery UI datepicker opens automatically within dialog 【发布时间】：2010-10-30 06:22:30 【问题描述】：我有一个在 jQuery 对话框对象中使用的日期选择器。使用.load() 加载对话框内容的源。在对话框中，我创建了一个脚本，该脚本为文本输入创建了一个日期选择器。
$("#date").datepicker( ... );
当我第一次打开对话框时 - 一切正常，但如果我关闭它并再次打开，日期选择器会自动触发（并且没有像 autoOpen:false 这样的选项）
有什么办法可以防止这种情况发生吗？或者我做错了什么？
【问题讨论】：
【参考方案1】：我找到了更简单的方法：
$("#dialogPopper").click(
function()
$("#date").datepicker("disable");
$("#dialog").dialog("open");
$("#date").datepicker("enable");
return false;
);
【讨论】：
我的对话框包含一个 ajax 结果，所以我必须在我的 datepicker 选项中添加$(document).on('focus', 'input.datepicker', function () ... 加载的内容 - 在 AJAX 内容加载并附加到标记时设置“禁用”和“启用”，再次“禁用” - 当对话框关闭时。在日历中选择时，现在的值根本没有改变 - 它保持打开状态。
工作就像一个魅力！感谢您从 2016 年开始【参考方案2】：
当您将日期选择器字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置一个隐藏的输入。
<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
【讨论】：
除非您想修改他们的插件，否则当模态在其他人的插件中时，这是唯一可行的解决方案 不错的贫民区技术。我之前有一些意见，但他们是type hidden，似乎不算数。在之前添加一个无用的输入效果很好，但是，添加无用的 dom 元素，当你发布你的表单时，你就没有这个价值了。【参考方案3】：
我遇到了这个确切的问题，并且只对 tvanfosson 的技术稍作改动就解决了这个问题。出于某种原因，我不得不手动将“点击”事件附加到日期选择器字段，如下所示。
$('#dialog').dialog(
open: function(event, ui)
$(ui).find('#date').datepicker().click(function()
$(this).datepicker('show');
);
,
close: function(event,ui)
$(ui).find('#date').datepicker('destroy');
);
（抱歉——我更愿意将此作为评论发布到 tvanfosson 的帖子，但没有必要的代表。）
【讨论】：
不错的解决方案，尽管我不得不将 ui 更改为此。当您没有准备好对话框（在 DOM 中）但使用 JS 动态构建它时，这是需要的。【参考方案4】：您可能想考虑在对话框关闭时销毁日期选择器，并在对话框的打开事件处理程序中创建它，而不是将其作为脚本包含在对话框创建中。
$('#dialog').dialog(
open: function(event, ui)
$(ui).find('#date').datepicker();
,
close: function(event,ui)
$(ui).find('#date').datepicker('destroy');
);
您还可以尝试不同的事件/方法，看看是否真的需要重新创建它，但我认为这会奏效。
【讨论】：
我试过了，但它不起作用:(可能是因为使用 ajax 加载内容，例如：$('#dialog').load( ...).dialog ( ...); ? 什么不起作用 - 日期选择器没有创建还是重新打开时仍然出现？也许您应该发布完整的代码。【参考方案5】：原因是：模态表单中的第一项是日期选择器文本字段，当触发模态时，活动控件是包含日期选择器的控件。
我发现了两种替代解决方案：
更改字段的顺序。避免使用 datepicker 保持在第一位。
不要在单独的代码段中将 datepicker 设置为字段，而是在打开对话框的函数中进行设置（在打开 $("#dialog").dialog("open"); 之后）。
【讨论】：
【参考方案6】：选择器自行打开的原因是，在您第一次打开选择器后，输入字段保持焦点。
你需要模糊它：
$input.datepicker(
onClose: function(dateText)
$(this).trigger('blur');
);
【讨论】：
很好很简单，我在对话框打开调用后立即调用了模糊，它解决了我的问题。【参考方案7】：只是对话焦点：api.jqueryui.com/dialog/
打开对话框后，焦点会自动移至与以下内容匹配的第一个项目
对话框中具有自动对焦属性的第一个元素 对话框内容中的第一个 :tabbable 元素 对话框按钮窗格中的第一个 :tabbable 元素 对话框的关闭按钮 对话框本身
解决方案是在datepicker 以外的其他字段上使用autofocus 属性。
【讨论】：
我最喜欢自动对焦选项。简单并遵循 jquery 文档【参考方案8】：我遇到了类似的问题。我在 jquery ui 对话框中有一个 jquery datepicker。当我打开对话框时，日期选择器在 IE 中自动打开。在 Firefox 或 Chrome 中没有这样做...我通过在 $(document).ready 中创建时禁用日期选择器来解决问题，如下所示：
$('.ConfirmMove #from').datepicker(
duration: ''
).datepicker('disable');
然后，当我打开包含此日期选择器的对话框时，我在对话框的打开事件处理程序中启用了它：
$(".ConfirmMove").dialog(
close: function()
$('.ConfirmMove #from').datepicker('disable');
,
open: function()
$('.ConfirmMove #from').datepicker('enable');
);
您还必须记住在关闭对话框时将其禁用。
这样您也不会在每次打开和关闭对话框时销毁并重新创建日期选择器。
【讨论】：
【参考方案9】：这就是我解决问题的方法。
这段代码在对话框的创建中。
document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);
这样，当对话框打开时，它会在另一个控件中获得焦点。
您可以测试超时以减少延迟，但 100 对我来说没问题。
【讨论】：
【参考方案10】：我的决定是结合 jsonx 和 Pawel Furmaniak 的解决方案：
<input id='fake-input' type='text' style='width: 0; height: 0; top: -100px; position: absolute;'/>
$( '.datepickerclass' ).datepicker(
onClose: function()
$('#fake-input').trigger("focus");
【讨论】：
【参考方案11】：我知道这是一个老问题，但对我有用的一个解决方案是触发日历图标：
$( ".date" ).datepicker(
showOn: "button",
buttonImage: "../css/imgs/calendar.gif",
buttonImageOnly: true
);
【讨论】：
【参考方案12】：由于某种原因，当我在初始化程序中填写动画选项时，日历停止了这种行为：
showAnim: Drop
【讨论】：
【参考方案13】：从源代码中我发现jQuery.Dialog 总是跟踪对话框内元素上的focusin 事件，并在对话框获得活动状态后触发该元素上的focus 事件。为了防止这种行为，只需停止从被关注的元素开始冒泡事件传播。
$("#input").on("focusin", function (e)
return false; // or e.stopPropagation();
).datepicker();
jQuery 版本之间存在差异
票务http://bugs.jqueryui.com/ticket/9125
【讨论】：
以上是关于jQuery UI datepicker 在对话框中自动打开的主要内容，如果未能解决你的问题，请参考以下文章