jQueryUI İletişim Kutusu/Datepicker Otomatik Açılır

Question

Şu anda içerik olarak iki girişli bir iletişim kutusu (.datepicker() kullanarak iki girişle) var. İletişim kutusunu açtığımda, ilk giriş odağı olur ve ilk tarih seçici otomatik olarak görüntülenir. Bölmeyi gizlemeyi ve girdiyi bulanıklaştırmayı denedim, ancak bu tarihçinin artık odakta görünmemesine neden oluyor.

İdeal olarak, aşağıdaki edebilmek istiyorum:

• Aç (hayır datepickers gösteren) iletişim kutusu.
• İlk girişe tıklayın ve datepicker show'una sahip olun. İşte

benim geçerli kod:

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"); 
    } 
}); 

Ben de bir jsfiddle demo yaptık: http://jsfiddle.net/ARnee/19/

Ben çözüm için çevrimiçi aramış ve benzeri bulundu questions ama hiçbiri yardım etmiyor. Bana yardım eden var mı?

DÜZENLEME:

kullanıyorum tarayıcı Chrome.

Answer 1

yüzden görülmez hiçbir yüksekliğe sahip iletişim kutusunda bir kukla girişi sopa Can.

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

DEMO datepicker alanları önce yerleştirin: http://jsfiddle.net/ARnee/20/

Answer 2

Çok gibi iletişim kutusunun açık üzerine datepickers oluşturabilirsiniz:

$("#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); 
     } 
     }); 
}); 

Answer 3

$(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"); 
    }); 

}); 
​ 

Answer 4

-1 datepicker içeren girdilere tabindex niteliğini belirlemeyi deneyin.

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

DÜZENLEME:

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

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