jQuery UI 日期选择器在对话框中自动打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/932420/
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
jQuery UI datepicker opens automatically within dialog
提问by turezky
I have a datepicker which is used within the jQuery dialog object. The source of the dialog's content is loaded using .load(). Within the dialog I created a script which creates a datepicker for the text input.
我有一个在 jQuery 对话框对象中使用的日期选择器。对话框内容的源是使用 加载的.load()。在对话框中，我创建了一个脚本，它为文本输入创建了一个日期选择器。
$("#date").datepicker({ ... });
When I open the dialog for the first time - everything is okay, but if I close it and reopen again, the datepicker is triggered automatically (and there's no such an option like autoOpen:false)
Is there any way of preventing this or what am I doing wrong?
当我第一次打开对话框时 - 一切都很好，但是如果我关闭它并再次重新打开，日期选择器会自动触发（并且没有这样的选项autoOpen:false）有什么方法可以防止这种情况或者我做错了什么?
采纳答案by belacqua
I had this exact problem and solved it with only a slight variation on tvanfosson's technique. For some reason I had to manually attach the "click" event to the datepicker field as below.
我遇到了这个确切的问题，并且只对 tvanfosson 的技术稍作改动就解决了它。出于某种原因，我不得不手动将“click”事件附加到 datepicker 字段，如下所示。
$('#dialog').dialog({
open: function(event, ui) {
$(ui).find('#date').datepicker().click(function(){
$(this).datepicker('show');
});
},
close: function(event,ui) {
$(ui).find('#date').datepicker('destroy');
}});
(Sorry--I would've preferred to post this as a comment to tvanfosson's post but don't have the requisite rep.)
（抱歉——我更愿意将此作为对 tvanfosson 帖子的评论发布，但没有必要的代表。）
回答by Hupperware
Much simpler way I found:
我发现了更简单的方法：
$("#dialogPopper").click(
function() {
$("#date").datepicker("disable");
$("#dialog").dialog("open");
$("#date").datepicker("enable");
return false;
}
);
回答by jsonx
When you put the datepicker field at the beginning of the dialog it is opened automatically. You can place a hidden input at the beginning of the dialog.
当您将日期选择器字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置一个隐藏的输入。
<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
回答by tvanfosson
You might want to think about destroying the datepicker when the dialog is closed and creating it in the open event handler for the dialog instead of including it as a script in the dialog creation.
您可能需要考虑在对话框关闭时销毁日期选择器并在对话框的打开事件处理程序中创建它，而不是将其作为脚本包含在对话框创建中。
$('#dialog').dialog({
open: function(event, ui) {
$(ui).find('#date').datepicker();
},
close: function(event,ui) {
$(ui).find('#date').datepicker('destroy');
}
});
You could also experiment with different events/methods to see if you really need to recreate it, but I think that this would work.
您还可以尝试使用不同的事件/方法来查看是否真的需要重新创建它，但我认为这可行。
回答by Juliandrea85
The reason is : your first item inside modal form is the datepicker text field, and when the modal is fired, the active control is the one who contains the datepicker.
原因是：模态表单中的第一项是日期选择器文本字段，当模态被触发时，活动控件是包含日期选择器的控件。
I found out two alternative solutions:
我发现了两种替代解决方案：
Change the order of your fields. Avoid the one with datepicker to stay in first place.
Do not set datepicker to the field in a separate piece of code, do it inside the function that opens the dialog (right after openning
$("#dialog").dialog("open");).
更改字段的顺序。避免使用 datepicker 保持在第一位。
不要在单独的一段代码中将 datepicker 设置为该字段，而是在打开对话框的函数内进行（在 opening 之后
$("#dialog").dialog("open");）。
回答by Pawel Furmaniak
The reason picker opens by itself, is that the input field stays focused after you open picker for the first time.
选择器自行打开的原因是第一次打开选择器后输入字段保持聚焦。
You need to blur it:
你需要模糊它：
$input.datepicker({
onClose: function(dateText) {
$(this).trigger('blur');
}
});
回答by user1080588
It's just dialog focus: api.jqueryui.com/dialog/
这只是对话焦点：api.jqueryui.com/dialog/
Upon opening a dialog, focus is automatically moved to the first item that matches the following
- The first element within the dialog with the autofocus attribute
- The first :tabbable element within the dialog's content
- The first :tabbable element within the dialog's buttonpane
- The dialog's close button
- The dialog itself
打开对话框后，焦点会自动移动到与以下内容匹配的第一个项目
- 对话框中具有 autofocus 属性的第一个元素
- 对话框内容中的第一个 :tabbable 元素
- 对话框按钮窗格中的第一个 :tabbable 元素
- 对话框的关闭按钮
- 对话框本身
A solution is to use the autofocusattribute on other fields than datepicker.
一个解决方案是autofocus在其他字段上使用该属性而不是datepicker.
回答by EtienneT
I was having a similar problem. I have a jquery datepicker inside a jquery ui dialog. The date picker was opening automatically in IE when I opened the dialog. It was not doing that in Firefox or Chrome... I fixed the problem by disabling the datepicker upon creation in the $(document).ready like so:
我遇到了类似的问题。我在 jquery ui 对话框中有一个 jquery datepicker。当我打开对话框时，日期选择器在 IE 中自动打开。它在 Firefox 或 Chrome 中没有这样做......我通过在 $(document).ready 中创建时禁用日期选择器来解决这个问题，如下所示：
$('.ConfirmMove #from').datepicker({
duration: ''
}).datepicker('disable');
Then when I was opening the dialog containing this datepicker I enabled it in the open event handler of the dialog:
然后，当我打开包含此日期选择器的对话框时，我在对话框的 open 事件处理程序中启用了它：
$(".ConfirmMove").dialog({
close: function() {
$('.ConfirmMove #from').datepicker('disable');
},
open: function() {
$('.ConfirmMove #from').datepicker('enable');
}
});
You also have to remember to disable it back when you close the dialog.
您还必须记住在关闭对话框时将其禁用。
This way you also don't destroy and recreate the datepicker each time you open and close the dialog.
这样您也不会在每次打开和关闭对话框时销毁和重新创建日期选择器。
回答by Zorkind
This is what i did to fix my problem.
这就是我为解决我的问题所做的。
This code is in the creation of the dialog.
此代码在对话框的创建中。
document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);
This way, wen the dialog opens, it will get focus in another control.
这样，当对话框打开时，它会在另一个控件中获得焦点。
You can test the timeout for a smaller amount of delay, but 100 was ok for me.
您可以测试较小延迟的超时，但 100 对我来说没问题。
回答by hawk
From source code I found that jQuery.Dialogalways tracks focusinevent on elements within dialog, and triggers focusevent on that element after dialog gains active state. To prevent this behavior just stop bubbling event propagation from element being focused in.
从源代码中，我发现jQuery.Dialog始终跟踪focusin对话框内元素上的事件，并focus在对话框获得活动状态后触发该元素上的事件。为了防止这种行为，只需停止从被关注的元素中进行冒泡事件传播即可。
$("#input").on("focusin", function (e) {
return false; // or e.stopPropagation();
}).datepicker();
- Note that there are differences between
jQueryversions - Ticket http://bugs.jqueryui.com/ticket/9125
- 请注意，
jQuery版本之间存在差异 - 票http://bugs.jqueryui.com/ticket/9125
