jQueryUI對話框/日期選擇器自動打開

我目前有一個對話框，其內容爲兩個輸入（兩個輸入使用.datepicker()）。當我打開對話框時，第一個輸入成爲焦點，第一個日期選擇器自動出現。我試圖隱藏div和模糊輸入，但這會導致datepicker不再出現在焦點上。jQueryUI對話框/日期選擇器自動打開

理想情況下，我希望能夠爲以下內容：

打開對話框（無datepickers顯示）。
點擊第一個輸入並顯示datepicker。

這裏是我當前的代碼：

JAVASCRIPT：

$("#to").datepicker({ 
     onClose: function (selectedDate) { 
     $("#from").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#from").datepicker({ 
    onClose: function (selectedDate) {        
     $("#to").datepicker("option", "maxDate", selectedDate); 
    } 
}); 


$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
        if ($(".ui-datepicker").is(":visible")) 
         $(".ui-datepicker").hide(); 

        $("#to").blur(); 
        $this.focus().click(); 
       }, 
    close: function() { 
     $(this).dialog("close"); 
    } 
});

我也做了一個的jsfiddle演示：http://jsfiddle.net/ARnee/19/

我在網上搜索了一個解決方案，並發現了類似的questions ，但似乎沒有任何幫助。任何人都可以幫助我嗎？！

編輯：

我使用的瀏覽器是Chrome。

來源

2013-01-04 Dom

可以在沒有高度，也不會看到對話框堅持一個虛擬輸入。該日期選擇字段之前將其放置

<input style="height:0px; border:none"/>

DEMO：http://jsfiddle.net/ARnee/20/

來源

2013-01-04 23:36:16 charlietfl

謝謝你的幫助！這是一個巧妙的方法來解決這個問題！ – Dom

謝謝。我也設置'背景：透明'，因爲窗體有不同的顏色。 –

您可以在打開的對話框中創建datepickers，像這樣：

$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
        //if ($(".ui-datepicker").is(":visible")) 
        // $(".ui-datepicker").hide(); 

        $("#to").blur(); 
       }, 
    close: function() { 
     $("#to").datepicker("destroy"); 
     $("#from").datepicker("destroy"); 
     $(this).dialog("close"); 
    } 
}); 



$("#b1").click(function(){ 
     $("#settingsDialog").dialog("open"); 
     $("#to").datepicker({ 
     onClose: function (selectedDate) { 
      $("#from").datepicker("option", "minDate", selectedDate); 
     } 
     }); 

     $("#from").datepicker({ 
     onClose: function (selectedDate) { 
      $("#to").datepicker("option", "maxDate", selectedDate); 
     } 
     }); 
});

來源

2013-01-04 23:32:31 mccannf

也應該使用'destroy'上接近的情況下，對話框用於再次 – charlietfl

@charlietfl - 哎呀，你對。編輯。 – mccannf

這樣做！謝謝！ – Dom

$(document).ready(function(){ 



$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
     $("#to").datepicker({ 
     onClose: function (selectedDate) { 
      $("#from").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#from").datepicker({ 
     onClose: function (selectedDate) {       $("#to").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
        if ($(".ui-datepicker").is(":visible")) 
         $(".ui-datepicker").hide(); 

        $("#to").blur(); 
        $this.focus().click(); 
       }, 
    close: function() { 
     $("#to").datepicker("destroy"); 
     $("#from").datepicker("destroy"); 
     $(this).dialog("close"); 
    } 
}); 



    $("#b1").click(function(){ 
     $("#settingsDialog").dialog("open"); 
    }); 

});

來源

2013-01-04 23:50:45 Madi

不幸的是，這隻適用於打開的初始對話框。如果關閉並再次打開，問題仍然存在。 – Dom

你是對的，因爲mccannf說使用銷燬datepicker關閉將解決它 – Madi

嘗試設置在包含日期選擇器爲-1的輸入的的tabindex屬性。

<input type="text" id="to" tabindex="-1" />

編輯：

<input id="to" type="text" tabindex="-1" /> 
<input id="from" type="text" tabindex="-1" />

DEMO： http://jsfiddle.net/ARnee/32/

來源

2013-06-21 07:53:59 kayz1

+1 - 爲了這個工作，你需要將這個應用到'input's。無論如何，非常好的發現！ – Dom

jQueryUI對話框/日期選擇器自動打開

回答

相關問題