jQuery-UI Datepicker: перетаскиваемый?

Question

(Надеюсь) Простой вопрос:

Можно ли сделать перетащить jQuery UI Datepicker? Если да, может кто-нибудь дать мне пример кода?

Answer 1

$ ( "щ-DatePicker"). Перетаскиваемым () не работает?

Answer 2

Порядок важен.

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

РЕДАКТИРОВАТЬ : Существует небольшая разница между ответом @JZ и моим. На примере JZ любой указатель даты на странице будет перетаскиваемым, даже если он встроен (связан с DIV вместо элемента ввода). Мой код сделает всплывающие подсказки только перетаскиваемыми. Плагин datepicker создает один DIV (с именем ui-datepicker-div) для всех всплывающих окон и повторно использует его для любого ввода на странице, к которой был применен указатель даты. Для встроенных DIV или SPAN он создает новый безымянный указатель даты внутри DIV / SPAN, который имеет класс .ui-datepicker, но не имеет имени. В этом случае мой код не сделает перетаскиваемый указатель даты, возможно, правильным поведением, но JZ будут, поскольку он будет совпадать в зависимости от класса.

Пример:

<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

Вы можете добавить событие в DatePicker и использовать его, чтобы сделать его перетаскиваемым.

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

После вызова DatePicker и реализации функции onCreate, чтобы сделать его перетаскиваемым.

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

Пример jsfiddle