jQueryUI Dialog/Datepicker Auto-Opens

Question

Attualmente ho una finestra di dialogo con due ingressi come il suo contenuto (con i due ingressi che utilizzano .datepicker()). Quando apro la finestra di dialogo, il primo input diventa lo stato attivo e appare automaticamente il primo DatePicker. Ho provato a nascondere il div e ad offuscare l'input, ma questo fa sì che il datepicker non appaia più a fuoco.

Idealmente, voglio essere in grado di quanto segue:

• Aprire la finestra di dialogo (senza datepickers mostrando).
• Fare clic sul primo input e visualizzare lo strumento DatePicker.

Ecco il mio codice corrente:

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

Ho anche fatto una demo jsfiddle: http://jsfiddle.net/ARnee/19/

Ho cercato on-line per una soluzione, e ha trovato simili questions , ma nessuno sembra aiutare. Qualcuno potrebbe aiutarmi ?!

EDIT:

Il browser che sto usando è Chrome.

Answer 1

può attaccare un ingresso manichino in finestra di dialogo che non ha l'altezza e quindi non si vedrà. Posizionare prima i campi DatePicker

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

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

Answer 2

È possibile creare i datepickers sulla aperta della finestra di dialogo, in questo modo:

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

Prova a impostare la tabindex attributo ingressi contenenti il ​​DatePicker a -1.

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

EDIT:

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

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