jQuery-UI Datepicker: Draggable?

Question

(Hopefully) Simple question:

Is it possible to make the jQuery UI Datepicker draggable? If so, can someone give me some sample code?

Answer 1

$(".ui-datepicker").draggable() does not work?

Answer 2

The order is important.

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

EDIT: There is a subtle difference between the answer @JZ supplies and mine. Using JZ's example any datepicker on the page will be draggable, even those that are inline (associated with a DIV instead of an input element). My code will only make popup datepickers draggable. The datepicker plugin creates a single DIV (named ui-datepicker-div) for all popups and reuses it for any input on the page to which the datepicker has been applied. For inline DIVs or SPANs it creates a new, unnamed datepicker inside the DIV/SPAN that has the .ui-datepicker class, but does not have the name. In this case, my code will not make the datepicker draggable, arguably the correct behavior, but JZs will since it will match based on the class.

Example:

<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>