jQuery-UI Datepicker: Draggable?

Question

(Mam nadzieję) Proste pytanie:

Czy możliwe jest przeciągnięcie interfejsu JQuery UI Datepicker? Jeśli tak, czy ktoś może mi podać przykładowy kod?

Answer 1

$ (". Ui-datepicker"). Draggable() nie działa?

Answer 2

Kolejność jest ważna.

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

EDIT: Istnieje subtelna różnica pomiędzy dostawami odpowiedź @JZ i kopalni. Przy użyciu przykładu JZ każdy datepicker na stronie będzie przeciągalny, nawet te, które są wbudowane (powiązane z DIV zamiast elementu wejściowego). Mój kod spowoduje, że podręczne datepickery będą przeciągane. Wtyczka datepicker tworzy pojedynczy DIV (nazwany ui-datepicker-div) dla wszystkich wyskakujących okienek i używa go ponownie dla dowolnego wejścia na stronie, do której został zastosowany datepicker. W przypadku wbudowanych DIV lub SPAN tworzy nowy, nienazwany datepicker wewnątrz DIV/SPAN, który ma klasę .ui-datepicker, ale nie ma nazwy. W tym przypadku mój kod nie spowoduje, że datepicker będzie można przeciągnąć, prawdopodobnie prawidłowe zachowanie, ale JZs będzie, ponieważ będzie dopasowywał się w oparciu o klasę.

Przykład:

<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

Możesz dodać wydarzenie w datepicker i użyć go, aby go przeciągać.

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

Po wywołaniu datepicker i zaimplementowaniu funkcji onCreate w celu przeciągnięcia.

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

Example jsfiddle