jQuery-UI Datepicker: trascinabile?

Question

(Si spera) Domanda semplice:

E 'possibile rendere jQuery UI Datepicker trascinabile? Se è così, qualcuno può darmi qualche codice di esempio?

Answer 1

$ (". Ui-datepicker"). Draggable() non funziona?

Answer 2

L'ordine è importante.

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

EDIT: C'è una sottile differenza tra le forniture risposta @JZ e la mia. Utilizzando l'esempio di JZ, qualsiasi datapicker nella pagina sarà trascinabile, anche quelli che sono in linea (associati a un DIV anziché a un elemento di input). Il mio codice renderà trascinabili i popup datepickers. Il plugin datepicker crea un singolo DIV (chiamato ui-datepicker-div) per tutti i popup e lo riutilizza per qualsiasi input sulla pagina a cui è stato applicato il DatePicker. Per i DIV o SPAN in linea crea un nuovo datepicker senza nome all'interno di DIV/SPAN che ha la classe .ui-datepicker, ma non ha il nome. In questo caso, il mio codice non renderà trascurabile il datapicker, probabilmente il comportamento corretto, ma JZs poiché si abbinerà in base alla classe.

Esempio:

<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

È possibile aggiungere un evento in datepicker e utilizzarlo per rendere trascinabile.

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

Dopo aver chiamato datepicker e implementato la funzione onCreate per renderlo trascinabile.

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

Example jsfiddle