Question

我有一个在jQuery对话框对象中使用的日期选择器。使用.load()加载对话框内容的来源。在对话框中，我创建了一个脚本，为文本输入创建了一个日期选择器。

$("#date").datepicker({ ... });

当我第一次打开对话框时 - 一切正常，但如果我关闭它并再次重新打开，则会自动触发日期选择器（并且没有像autoOpen:false这样的选项）有没有办法阻止这个或我做错了什么？

Answer 1

我找到了更简单的方法：

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );

Answer 2

当您将datepicker字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置隐藏的输入。

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>

Answer 3

我有这个确切的问题并且在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');
 }});

（抱歉 - 我希望将此作为对tvanfosson帖子的评论发布，但没有必要的代表。）

Answer 4

您可能需要考虑在关闭对话框时销毁datepicker，并在对话框的open事件处理程序中创建它，而不是在对话框创建中将其包含为脚本。

 $('#dialog').dialog({
     open: function(event, ui) {
        $(ui).find('#date').datepicker();
     },
     close: function(event,ui) {
        $(ui).find('#date').datepicker('destroy');
     }
 });

您还可以尝试不同的事件/方法，看看是否真的需要重新创建它，但我认为这样可行。

Answer 5

原因是：你的模态形式中的第一个项是datepicker文本字段，当模态被触发时，活动控件是包含datepicker的那个。

我找到了两种替代解决方案：

更改字段的顺序。避免使用带有datepicker的人留在第一位。
不要在一段单独的代码中将datepicker设置到字段中，在打开对话框的函数内（在打开$("#dialog").dialog("open");之后）执行此操作。

Answer 6

选择器单独打开的原因是，在您第一次打开选择器后输入字段保持聚焦。

你需要模糊它：

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});

Answer 7

我遇到了类似的问题。我在jquery ui对话框中有一个jquery datepicker。打开对话框时，日期选择器在IE中自动打开。它在Firefox或Chrome中没有这样做...我通过在$（文档）中创建时禁用datepicker来解决问题。就像这样：

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

然后当我打开包含此datepicker的对话框时，我在对话框的open事件处理程序中启用了它：

$(".ConfirmMove").dialog({
  close: function() { 
     $('.ConfirmMove #from').datepicker('disable'); 
  },
  open: function() {
     $('.ConfirmMove #from').datepicker('enable');
  }
});

您还必须记住在关闭对话框时将其禁用。

这样，每次打开和关闭对话框时，也不会破坏并重新创建日期选择器。

Answer 8

这就是我解决问题的方法。

此代码用于创建对话框。

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

这样，当对话框打开时，它将聚焦于另一个控件。

您可以测试延迟时间较短的延迟，但100对我来说没问题。

Answer 9

这只是对话焦点：api.jqueryui.com/dialog/

打开对话框后，焦点会自动移动到与以下内容匹配的第一个项目


具有自动对焦属性的对话框中的第一个元素

对话框内容中的第一个：tabbable元素

对话框的按钮窗格中的第一个：tabbable元素

对话框的关闭按钮

对话框本身

解决方案是在autofocus以外的其他字段上使用datepicker属性。

Answer 10

我知道这是一个老问题，但是一个对我有用的解决方案是触发日历图标：

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});

Answer 11

由于某种原因，当我在初始化程序中填写动画选项时，日历停止了此行为：

showAnim：Drop

Answer 12

从源代码我发现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在对话框中自动打开

12 个答案: