jquery datepicker trong một hộp thoại

Question

Tôi muốn sử dụng một jpery datepicker trong một hộp thoại. Các datepicker nên được kích hoạt trên tập trung (mặc định). Vì hộp văn bản là trường đầu tiên trên hộp thoại, nó tự động có tiêu điểm. Điều này có tác dụng không mong muốn khi mở datepicker khi hộp thoại được mở trước.

Tôi đã thử nhiều thứ khác nhau như đặt tiêu điểm thành dummy href, gọi datepicker ('close') sau khi hộp thoại mở ra, đặt showOn thành 'button', sau đó thay đổi thành 'focus' sau khi hộp thoại mở nhưng không ai làm việc.

Trình ghi ngày tháng chỉ được hiển thị khi hộp văn bản lấy tiêu điểm, ngoại trừ khi hộp thoại mở đầu tiên.

đoạn My

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDate').datepicker({ 
      title: 'Test Dialog' 
     }); 
     $('#myDialog').dialog(); 
    }); 
});​ 

JS Fiddle liên kết: http://jsfiddle.net/UkTQ8/

Answer 1

Giải pháp: Thêm một hộp văn bản dummy trước ngày textbox.

Demo: http://jsfiddle.net/UkTQ8/4/

<div id="myDialog" title="Text Dialog"> 

<input type="text" id="dummyDate" /> <!-- dummy textbox --> 

<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p> 
Enter date: <input type="text" id="myDate" /> 
</div> 

Answer 2

Tạo datepicker về mở và tiêu diệt nó vào gần:

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDialog').dialog({ 
      open: function() { 
       $('#myDate').datepicker({title:'Test Dialog'}).blur(); 
      }, 
      close: function() { 
       $('#myDate').datepicker('destroy'); 
      }, 
     }); 
    }); 
}); 

DEMO: http://jsfiddle.net/UkTQ8/7/

Answer 3

Một giải pháp đơn giản hơn sẽ được chỉ cần thêm tabIndex = "- 1" vào hộp văn bản.

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