jQuery-UI Datepicker: Kéo được?

Question

(Hy vọng) Câu hỏi đơn giản:

Có thể kéo jQuery UI Datepicker có thể kéo được không? Nếu vậy, ai đó có thể cho tôi một số mã mẫu?

Answer 1

$ (". Ui-datepicker"). Draggable() không hoạt động?

Answer 2

Thứ tự quan trọng.

$('#myCalendarInput').datepicker(); 
$('#ui-datepicker-div').draggable(); 

EDIT: Có một sự khác biệt tinh tế giữa các nguồn cung cấp câu trả lời @JZ và mỏ. Sử dụng ví dụ của JZ, bất kỳ datepicker nào trên trang sẽ có thể kéo được, ngay cả những nội dung có nội tuyến (được liên kết với một DIV thay vì một phần tử đầu vào). Mã của tôi sẽ chỉ làm cho trình tạo ngày nền popup có thể kéo được. Plugin datepicker tạo ra một DIV duy nhất (có tên là ui-datepicker-div) cho tất cả các cửa sổ bật lên và sử dụng lại nó cho bất kỳ đầu vào nào trên trang mà datepicker đã được áp dụng. Đối với DIV nội tuyến hoặc SPAN, nó tạo ra một datepicker mới, chưa đặt tên bên trong DIV/SPAN có lớp .ui-datepicker, nhưng không có tên. Trong trường hợp này, mã của tôi sẽ không làm cho datepicker có thể kéo được, cho là hành vi đúng, nhưng JZs sẽ vì nó sẽ khớp dựa trên lớp.

Ví dụ:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#calendar').datepicker(); 
    $('#calendar2').datepicker(); 
    $('#calendar3').datepicker(); 
    $('#ui-datepicker-div').draggable(); 
}); 
</script> 

<div> 
Calendar: <input id="calendar" type="text" /><br /> <-- draggable 
Calendar2: <input id="calendar2" type="text" /><br/> <-- draggable 
Fixed calendar: <div id="calendar3"></div> <-- fixed 
</div> 

Answer 3

Bạn có thể thêm một sự kiện trong datepicker và sử dụng nó để làm cho nó có khả năng kéo.

//Add an event "onCreate" 
$.datepicker._updateDatepicker_Old = $.datepicker._updateDatepicker; 
$.datepicker._updateDatepicker = function(inst) { 
    this._updateDatepicker_Old(inst); 

    var onCreate = this._get(inst, 'onCreate'); 
    if (onCreate !== null) { 
     onCreate(inst); 
    } 
}; 

Sau khi bạn gọi datepicker và thực hiện các chức năng onCreate để làm cho nó có khả năng kéo.

$(function() { 
    //Create datepicker 
    $('#datepicker').datepicker({ 
     onCreate: function(inst) { 
      $(inst.dpDiv).draggable(); 
     } 
    }); 
});​ 

Example jsfiddle