我有一个在 jQuery 对话框对象中使用的日期选择器。使用.load() 加载对话框内容的源。在对话框中，我创建了一个脚本，该脚本为文本输入创建了一个日期选择器。
$("#date").datepicker({ ... });
当我第一次打开对话框时 - 一切正常，但如果我关闭它并再次打开，日期选择器会自动触发（并且没有像 autoOpen:false 这样的选项）
有什么办法可以防止这种情况发生吗？或者我做错了什么？
【问题讨论】：
标签： jquery ajax jquery-ui dialog datepicker
我找到了更简单的方法：
$("#dialogPopper").click(
function() {
$("#date").datepicker("disable");
$("#dialog").dialog("open");
$("#date").datepicker("enable");
return false;
}
);
【讨论】：
$(document).on('focus', 'input.datepicker', function () ... 加载的内容 - 在 AJAX 内容加载并附加到标记时设置“禁用”和“启用”，再次“禁用” - 当对话框关闭时。在日历中选择时，现在的值根本没有改变 - 它保持打开状态。
当您将日期选择器字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置一个隐藏的输入。
<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
【讨论】：
type hidden，似乎不算数。在之前添加一个无用的输入效果很好，但是，添加无用的 dom 元素，当你发布你的表单时，你就没有这个价值了。
我遇到了这个确切的问题，并且只对 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 的帖子，但没有必要的代表。）
【讨论】：
您可能想考虑在对话框关闭时销毁日期选择器，并在对话框的打开事件处理程序中创建它，而不是将其作为脚本包含在对话框创建中。
$('#dialog').dialog({
open: function(event, ui) {
$(ui).find('#date').datepicker();
},
close: function(event,ui) {
$(ui).find('#date').datepicker('destroy');
}
});
您还可以尝试不同的事件/方法，看看是否真的需要重新创建它，但我认为这会奏效。
【讨论】：
原因是：模态表单中的第一项是日期选择器文本字段，当触发模态时，活动控件是包含日期选择器的控件。
我发现了两种替代解决方案：
更改字段的顺序。避免使用 datepicker 保持在第一位。
不要在单独的代码段中将 datepicker 设置为字段，而是在打开对话框的函数中进行设置（在打开 $("#dialog").dialog("open"); 之后）。
【讨论】：
选择器自行打开的原因是，在您第一次打开选择器后，输入字段保持焦点。
你需要模糊它：
$input.datepicker({
onClose: function(dateText) {
$(this).trigger('blur');
}
});
【讨论】：
只是对话焦点：api.jqueryui.com/dialog/
打开对话框后，焦点会自动移至与以下内容匹配的第一个项目
- 对话框中具有自动对焦属性的第一个元素
- 对话框内容中的第一个 :tabbable 元素
- 对话框按钮窗格中的第一个 :tabbable 元素
- 对话框的关闭按钮
- 对话框本身
解决方案是在datepicker 以外的其他字段上使用autofocus 属性。
【讨论】：
我遇到了类似的问题。我在 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');
}
});
您还必须记住在关闭对话框时将其禁用。
这样您也不会在每次打开和关闭对话框时销毁并重新创建日期选择器。
【讨论】：
这就是我解决问题的方法。
这段代码在对话框的创建中。
document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);
这样，当对话框打开时，它会在另一个控件中获得焦点。
您可以测试超时以减少延迟，但 100 对我来说没问题。
【讨论】：
我的决定是结合 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");
}
【讨论】：
我知道这是一个老问题，但对我有用的一个解决方案是触发日历图标：
$( ".date" ).datepicker({
showOn: "button",
buttonImage: "../css/imgs/calendar.gif",
buttonImageOnly: true
});
【讨论】：
由于某种原因，当我在初始化程序中填写动画选项时，日历停止了这种行为：
showAnim: Drop
【讨论】：
从源代码中我发现jQuery.Dialog 总是跟踪对话框内元素上的focusin 事件，并在对话框获得活动状态后触发该元素上的focus 事件。为了防止这种行为，只需停止从被关注的元素开始冒泡事件传播。
$("#input").on("focusin", function (e) {
return false; // or e.stopPropagation();
}).datepicker();
jQuery 版本之间存在差异【讨论】：