jQuery Datepicker - đóng trên đầu vào nhấp vào

Question

Tôi đang sử dụng jQuery Datepicker và tôi có một vấn đề nhỏ.

Nếu trình mở khóa ngày được mở và bạn bấm lại vào trường nhập, không có gì xảy ra. Làm cách nào tôi có thể thay đổi điều đó .. bộ chọn sẽ được đóng trên lần nhấp đầu vào nếu nó đã được mở?

Cảm ơn trước ...

Answer 1

Kể từ đó là ràng buộc để focus (theo mặc định), bạn chỉ có thể ràng buộc .mousedown() xử lý riêng của bạn và nó sẽ không can thiệp, như thế này:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide");  
}); 

You can give it a try here . Tôi đang sử dụng mousedown vì đó cũng là cách phát hiện hành vi gần giống của nó, do đó, chỉ phù hợp với hành vi này trong tương lai hơn bằng chứng này.

Answer 2

Vì tôi không thể bình luận được nêu ra ...

Một điều khó chịu là từ datepicker sử dụng tập trung, một khi bạn giấu nó, bạn có thể không hiển thị nó một lần nữa mà không làm mờ đầu tiên và sau đó tập trung (do đó bấm ở đâu đó khác, sau đó nhấp lại).

tôi giải quyết điều này bằng cách thêm dòng sau vào câu trả lời Nick Craver của (bên trong mousedown):

$(this).blur(); 

Vì vậy, nó sẽ giống như thế này:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide"); 
    $(this).blur(); 
}); 

Answer 3

Tôi tìm thấy một cách tốt hơn. ẩn dường như không làm cho các nhấp chuột tiếp tục mở rộng. Và làm mờ bộ chọn ngày để mở một giây sau đó.

tôi đã sử dụng chuyển đổi:

$('.datepicker').mousedown(function() { 
    $('#ui-datepicker-div').toggle(); 
}); 

Answer 4

Để làm việc nhiều hơn sau đó một thời gian (thử nhấp chuột nhiều lần vào đầu vào), bạn nên sử dụng:

$("#datepicker").datepicker();  
$("#datepicker").mousedown(function() { 
    var cond = $(this).data('datepicker').dpDiv.is(':visible'); 
    $(this).datepicker(cond ? 'hide' : 'show'); 
}); 

Answer 5

này làm việc cho tôi (console. phương thức đăng nhập là đầu ra để thử nghiệm - loại bỏ để sản xuất):

// call addToggleListener function one time to init 
addToggleListener($('.myDatepickerInputs')); 

// the function 
function addToggleListener(elm) 
{ 
    elm.off('mouseup'); 

    elm.on('mouseup', function() 
    { 
     $(this).off('mouseup'); 
     $(this).datepicker("show"); 

     console.log("show"); 

     $(this).on('mouseup', function() 
     { 
      $(this).off('mouseup'); 
      $(this).datepicker("hide"); 
      addToggleListener($(this)); 

      console.log("hide"); 
     }); 
    }); 
} 

Gọi hàm bằng cách sử dụng datepickers „onClo se “tùy chọn:

onClose: function() 
{ 
    addToggleListener($(this)); 
} 

Đã thử nghiệm với Google Chrome.