Hộp thoại jQueryUI/Datepicker Auto-Opens

Question

Tôi hiện đang có một hộp thoại có hai đầu vào là nội dung của nó (với hai đầu vào sử dụng .datepicker()). Khi tôi mở hộp thoại, đầu vào đầu tiên sẽ trở thành tiêu điểm và biểu tượng datepicker đầu tiên sẽ tự động xuất hiện. Tôi đã thử ẩn div và làm mờ đầu vào, nhưng điều đó làm cho datepicker không còn xuất hiện trên tiêu điểm.

Lý tưởng nhất, tôi muốn có thể như sau:

• Mở hộp thoại (không datepickers hiển thị).
• Nhấp vào mục nhập đầu tiên và có chương trình hiển thị ngày tháng.

Đây là mã hiện tại của tôi:

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

tôi cũng đã thực hiện một bản demo jsfiddle: http://jsfiddle.net/ARnee/19/

Tôi đã tìm kiếm trực tuyến cho một giải pháp, và tìm thấy tương tự questions , nhưng không ai có vẻ như giúp đỡ. Bất cứ ai có thể giúp tôi?!

EDIT:

Trình duyệt tôi đang sử dụng là Chrome.

Answer 1

có thể dính một đầu vào hình nộm trong hộp thoại mà không có chiều cao như vậy sẽ không được nhìn thấy. Đặt nó trước khi các lĩnh vực datepicker

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

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

Answer 2

Bạn có thể tạo các datepickers khi mở hộp thoại, như vậy:

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

Hãy thử thiết lập các tabIndex thuộc tính trên các đầu vào chứa datepicker -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/