在对话框窗口打开jQuery UI DatePicker打开

我正在显示一个jQuery UI对话框窗口，其中包含一个jQuery UI日期选择器控件。问题在于对话窗口上的第一个窗体字段是日期选择器，因此当窗口打开时会收到焦点，从而导致日期选择器窗口自动打开。我不希望发生这种情况。在对话框窗口打开jQuery UI DatePicker打开

我已经打过电话

$('#Date').datepicker('hide')

在对话窗口中，然后打开功能，并且也使对话框打开，但它不为工作所达到的代码时的代码中，日期选择器窗口后ISN还没打开。

如何使日历选择器窗口在对话窗口显示时不打开，但当用户单击输入时仍然打开日期选择器窗口？

来源

2011-10-07 Nick Olsen

的可能重复的[如何模糊在对话框开口中的第一形式的输入（http://stackoverflow.com/questions/5418138/how-to-blur-the-first-form-input-at -the-dialog-opening） – Teepeemm

您可以使用图标触发：http://jqueryui.com/demos/datepicker/#icon-trigger

而且，如果需要的话，防止用户在键入日期。

我用日期选择器创建了一个对话框的小提琴，但无法在FF或Chrome中复制问题。知道它发生在IE中。

http://jsfiddle.net/458bM/2/

$(".datepicker").datepicker({ 
    dateFormat: 'yy-mm-dd ' 
}); 

$(".datepicker").datepicker("disable"); 

$("#dialog").dialog({ 
width: 400, 
modal: true, 
open: function(event, ui) { 
    $(".datepicker").datepicker("enable"); 
    } 
});

基于以前的答案：How to blur the first form input at the dialog opening

来源

2011-10-07 17:30:20

不知道这是一个jsfiddle问题，但如果你把它放在一个正常渲染的页面中，它也发生在Chrome中。 –

@NickOlsen这是关注第一个元素的对话框。 jquery ui团队有一张票可以修复。与此同时，我更新了我的答案和小提琴。 –

这有点烦人。但是，我猜你在空闲时不会抱怨太多！:) –

当您定义对话框时，您可以指定在打开时获得焦点的元素。将焦点设置到不同的元素在对话框

$('#myDialog').dialog({ 
    open: function (event, ui) 
     { 
      $('#myInputBox').focus(); 
     } 
});

您也可以把您的来电隐藏在打开的事件代码的日期选择器。

来源

2011-10-07 17:18:19 Geoff

我尝试了这两个想法，正如描述中提到的那样，但它没有奏效。我在打开的函数上放置了一个断点，并且datepicker窗口在此时未打开。它在打开函数执行后打开。 –

您可以禁用日期选择器时，对话框未打开。

$('#datepicker').datepicker({ 
    ... 
    disabled: true 
}); 

$('#dialog').dialog({ 
    open: function(event, ui) { 
     $('#datepicker').datepicker('enable'); 
    }, 
    close: function(event, ui) { 
     $('#datepicker').datepicker('disable'); 
    }, 
    ... 
});

看到这个在行动：http://jsfiddle.net/william/Rf37h/1/。

来源

2011-10-07 22:33:23

我试过了，但没有工作，你能给完整的源代码吗？ –

完整的源代码位于演示网站：http://jsfiddle.net/william/Rf37h/1/。 –

我看到它，但是当从一个单独的文件中调用时，它不起作用。我们只需要包含jquery1.6.3？ –

尝试这一行代码

$(document).ready (function() { 
$('#dialog_modal_body').on("click", ".datepicker", function(){ 
     $("#ui-datepicker-div").css("z-index", "100000"); 
}); 
});

来源

2014-01-16 12:00:52

前添加一个隐藏的元素，它会尝试自动聚焦功能。

这将使您的日期选择器在打开对话框时不被重点关注。

<span class="ui-helper-hidden-accessible"><input type="text"/>Prevents autofocus from opening start datepicker on dialog load</span>

来源

2014-12-10 15:23:46

在对话框窗口打开jQuery UI DatePicker打开

回答

相关问题