jQueryUI Dialog/Datepicker Auto-Opens

Question

Ich habe derzeit ein Dialogfeld mit zwei Eingängen als Inhalt (mit den beiden Eingängen .datepicker()). Wenn ich das Dialogfeld öffne, wird die erste Eingabe zum Fokus und der erste Datumsauswahl wird automatisch angezeigt. Ich habe versucht, das div zu verbergen und die Eingabe zu verwischen, aber dadurch erscheint der Datumszeiger nicht mehr im Fokus.

Idealerweise mag ich die folgende Lage sein:

• öffnen Sie das Dialogfeld (mit keinem Kalenderwerkzeug zeigt).
• Klicken Sie auf die erste Eingabe und lassen Sie sich den Datumszeiger anzeigen.

Hier ist meine aktuellen Code:

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

ich auch eine jsfiddle Demo gemacht haben: http://jsfiddle.net/ARnee/19/

ich online gesucht haben nach einer Lösung und fand ähnliche questions , aber keine, die zu helfen scheinen. Könnte mir jemand helfen ?!

EDIT:

Der Browser ich verwende ist Chrome.

Answer 1

Kann ein Dummy-Eingabe im Dialog bleiben, die keine Höhe hat, wird so nicht zu sehen. Legen Sie sie vor den picker Felder

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

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

Answer 2

Sie können das Kalender auf offenen des Dialogs schaffen, etwa so:

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

Versuchen Sie, die tabindex Attribut an den Eingängen der Datepicker auf -1 enthält.

<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/