31

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

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

当我第一次打开对话框时 - 一切都很好，但是如果我关闭它并再次重新打开，日期选择器会自动触发（并且没有像这样的选项autoOpen:false）有什么方法可以防止这种情况或我做错了什么?

4

13 回答 13

33

我发现了更简单的方法：

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );
于 2010-10-22T20:03:44.930 回答
25

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

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
于 2010-11-22T21:29:50.607 回答
15

我遇到了这个确切的问题，并且只对 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 的帖子，但没有必要的代表。）

于 2009-06-07T21:06:18.080 回答
8

您可能想考虑在对话框关闭时销毁日期选择器，并在对话框的打开事件处理程序中创建它，而不是将其作为脚本包含在对话框创建中。

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

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

于 2009-05-31T16:58:15.317 回答
5

原因是：您在模态表单中的第一个项目是日期选择器文本字段，当触发模态时，活动控件是包含日期选择器的控件。

我发现了两种替代解决方案：

  1. 更改字段的顺序。避免使用 datepicker 保持在第一位。

  2. 不要在单独的代码段中将 datepicker 设置为该字段，而是在打开对话框的函数中进行（在 opening 之后$("#dialog").dialog("open");）。

于 2012-10-30T16:50:28.567 回答
4

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

你需要模糊它：

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});
于 2013-12-09T17:51:42.133 回答
4

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

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

  1. 对话框中具有 autofocus 属性的第一个元素
  2. 对话框内容中的第一个 :tabbable 元素
  3. 对话框按钮窗格中的第一个 :tabbable 元素
  4. 对话框的关闭按钮
  5. 对话框本身

A solution is to use the autofocus attribute on other fields than datepicker.

于 2016-04-13T19:45:01.520 回答
2

我遇到了类似的问题。我在 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');
  }
});

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

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

于 2010-01-26T14:57:50.807 回答
1

这就是我为解决我的问题所做的。

此代码在对话框的创建中。

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

这样，当对话框打开时，它将在另一个控件中获得焦点。

您可以测试超时以减少延迟，但 100 对我来说没问题。

于 2012-08-15T19:12:34.987 回答
1

My decision is to combine jsonx's and Pawel Furmaniak's solutions:

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

$( '.datepickerclass' ).datepicker({
   onClose: function() {
$('#fake-input').trigger("focus");
 }
于 2021-11-17T05:07:18.363 回答
0

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

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});
于 2012-06-17T00:36:16.863 回答
0

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

showAnim: Drop

于 2013-10-29T11:54:05.427 回答
0

从源代码中我发现jQuery.Dialog始终跟踪对话框内元素上的事件，并在对话框获得活动状态后focusin触发该元素上的事件。focus为了防止这种行为，只需停止从被关注的元素中冒泡事件传播。

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();
于 2015-05-05T07:36:59.477 回答