CODEWITHSUNDEEP
jqueryjquery-uidatepickerdraggable
Andrew Ensley
Andrew Ensley

Reputation: 11697

jQuery-UI Datepicker: Draggable?

(Hopefully) Simple question:

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

Upvotes: 5

Views: 5342

Answers (3)

GuillaumeS
GuillaumeS

Reputation: 1678

You can add an event in datepicker and use it to make it draggable.

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

After you call datepicker and implements the function onCreate to made it draggable.

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

Example jsfiddle

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532485

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>

Upvotes: 6

zalew
zalew

Reputation: 10311

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

Upvotes: 9

Related Questions