Giao diện người dùng jQuery DatePicker Mở trên cửa sổ hộp thoại Mở

Question

Tôi đang hiển thị cửa sổ hộp thoại giao diện người dùng jQuery có chứa điều khiển bộ đếm ngày của giao diện người dùng jQuery trong đó. Vấn đề là trường biểu mẫu đầu tiên trên cửa sổ hộp thoại là datepicker và do đó nó nhận được tiêu điểm khi cửa sổ mở ra, điều này sẽ làm cho cửa sổ datepicker tự động mở. Tôi không muốn điều này xảy ra.

Tôi đã thử gọi

$('#Date').datepicker('hide') 

chức năng sau đó mở cửa sổ hộp thoại và cũng sau khi mã mà làm cho hộp thoại mở nhưng nó không hoạt động như khi mã được đạt tới, cửa sổ datepicker isn chưa mở.

Tôi làm cách nào để cửa sổ ngày đó không mở khi cửa sổ hộp thoại xuất hiện nhưng vẫn mở nó khi người dùng nhấp vào đầu vào?

Answer 1

Bạn có thể sử dụng kích hoạt biểu tượng: http://jqueryui.com/demos/datepicker/#icon-trigger

Và, nếu cần thiết, ngăn chặn người dùng gõ vào một ngày.

Tôi đã tạo một hộp thoại của một hộp thoại có trình chỉnh sửa ngày và không thể sao chép vấn đề trong FF hoặc Chrome. Đã xảy ra trong IE.

http://jsfiddle.net/458bM/2/

$(".datepicker").datepicker({ 
    dateFormat: 'yy-mm-dd ' 
}); 

$(".datepicker").datepicker("disable"); 

$("#dialog").dialog({ 
width: 400, 
modal: true, 
open: function(event, ui) { 
    $(".datepicker").datepicker("enable"); 
    } 
}); 

Dựa trên câu trả lời trước: How to blur the first form input at the dialog opening

Answer 2

Khi bạn xác định hộp thoại của mình, bạn có thể chỉ định phần tử để lấy tiêu điểm khi mở. Đặt trọng tâm vào một yếu tố khác nhau trong hộp thoại

$('#myDialog').dialog({ 
    open: function (event, ui) 
     { 
      $('#myInputBox').focus(); 
     } 
}); 

Bạn cũng có thể đặt cuộc gọi của bạn để ẩn các datepicker trong mã sự kiện mở.

Answer 3

Bạn có thể vô hiệu hóa các datepicker khi hộp thoại không mở cửa.

$('#datepicker').datepicker({ 
    ... 
    disabled: true 
}); 

$('#dialog').dialog({ 
    open: function(event, ui) { 
     $('#datepicker').datepicker('enable'); 
    }, 
    close: function(event, ui) { 
     $('#datepicker').datepicker('disable'); 
    }, 
    ... 
}); 

Xem hoạt động này: http://jsfiddle.net/william/Rf37h/1/.

Answer 4

Hãy thử một mã dòng này

$(document).ready (function() { 
$('#dialog_modal_body').on("click", ".datepicker", function(){ 
     $("#ui-datepicker-div").css("z-index", "100000"); 
}); 
}); 

Answer 5

Thêm một yếu tố tiềm ẩn trước khi nó rằng nó sẽ cố gắng để tự động lấy nét để.

Điều này sẽ giữ cho datepicker của bạn không bị tập trung vào khi mở hộp thoại.

<span class="ui-helper-hidden-accessible"><input type="text"/>Prevents autofocus from opening start datepicker on dialog load</span>