jQuery-UI Datepicker: ¿Arrastrable?

Question

(Con suerte) Pregunta simple:

¿Es posible hacer jQuery UI Datepicker que se pueda arrastrar? Si es así, ¿alguien puede darme un código de muestra?

Answer 1

$ (". Ui-datepicker"). Draggable() ¿no funciona?

Answer 2

El pedido es importante.

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

EDITAR: Hay una diferencia sutil entre los equipos de respuesta @JZ y la mía. Usando el ejemplo de JZ, cualquier marcador de fecha en la página será arrastrable, incluso aquellos que están en línea (asociados con un DIV en lugar de un elemento de entrada). Mi código solo hará que los datapickers emergentes sean arrastrables. El complemento datepicker crea un único DIV (llamado ui-datepicker-div) para todas las ventanas emergentes y lo reutiliza para cualquier entrada en la página a la que se le ha aplicado el marcador de fecha. Para los DIV o SPAN en línea, crea un nuevo datepicker sin nombre dentro del DIV/SPAN que tiene la clase .ui-datepicker, pero no tiene el nombre. En este caso, mi código no hará que el datepicker sea arrastrable, podría decirse que es el comportamiento correcto, pero JZ lo hará ya que coincidirá en función de la clase.

Ejemplo:

<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

Puede agregar un evento en el selector de fechas y utilizarlo para hacer que se pueda arrastrar.

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

Después de llamar a datepicker e implementa la función en Crear para que sea arrastrable.

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

Example jsfiddle