在對話框窗口打開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打開

回答

相關問題