jQuery-UI Datepicker: Draggable?

Question

(Espérons que) Question simple:

Est-il possible de rendre le jpu Datepicker jQuery glisser? Si oui, quelqu'un peut-il me donner un exemple de code?

Answer 1

$ (". Ui-datepicker"). Draggable() ne fonctionne pas?

Answer 2

La commande est importante.

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

EDIT: Il y a une différence subtile entre les fournitures @JZ de réponse et la mienne. En utilisant l'exemple de JZ, n'importe quel outil de date sur la page sera déplaçable, même ceux qui sont en ligne (associés à un DIV au lieu d'un élément en entrée). Mon code ne fera que déplacer les pop-up popup. Le plugin datepicker crée un seul DIV (appelé ui-datepicker-div) pour tous les popups et le réutilise pour toute entrée sur la page à laquelle le datpicker a été appliqué. Pour les DIVs en ligne ou les SPAN, il crée un nouveau marqueur de date sans nom dans le DIV/SPAN qui a la classe .ui-datepicker, mais n'a pas le nom. Dans ce cas, mon code ne rendra pas le datepicker draggable, sans doute le comportement correct, mais JZs le fera car il correspondra en fonction de la classe.

Exemple:

<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

Vous pouvez ajouter un événement dans datepicker et l'utiliser pour faire draggable. Après avoir appelé datepicker et implémente la fonction onCreate pour le rendre draggable.

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

Example jsfiddle