jQuery-UI 日期选择器：可拖动？答案

【问题标题】：jQuery-UI Datepicker: Draggable?jQuery-UI 日期选择器：可拖动？
【发布时间】：2010-10-18 22:23:41
【问题描述】：

（希望）简单的问题：

是否可以使 jQuery UI Datepicker 可拖动？如果是这样，有人可以给我一些示例代码吗？

【问题讨论】：

标签： jquery jquery-ui datepicker draggable

【解决方案1】：

$(".ui-datepicker").draggable() 不行吗？

【讨论】：

确实如此。我显然是 jQuery UI 的新手，所以感谢您对一个愚蠢问题的帮助。
没问题 :) 要知道通过 javascript 加载的类和 ids 元素有哪些，请安装 Firebug。
哦，相信我，Firebug 是我的朋友。我只是不知道是否有可能使日期选择器可拖动。

【解决方案2】：

顺序很重要。

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

编辑：@JZ 提供的答案和我的答案之间存在细微差别。使用 JZ 的示例，页面上的任何日期选择器都是可拖动的，即使是内联的（与 DIV 而不是输入元素相关联）。我的代码只会使弹出日期选择器可拖动。 datepicker 插件为所有弹出窗口创建一个单独的 DIV（名为 ui-datepicker-div），并将其重用于应用了 datepicker 的页面上的任何输入。对于内联 DIV 或 SPAN，它会在具有 .ui-datepicker 类但没有名称的 DIV/SPAN 内创建一个新的未命名日期选择器。在这种情况下，我的代码不会使日期选择器可拖动，可以说是正确的行为，但 JZs 会因为它将基于类进行匹配。

例子：

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

【讨论】：

自从 JZ 的回答奏效以来，我还没有尝试过这个，但是使用这个解决方案，您不会在同一页面上遇到多个日期选择器的问题吗？
我的代码和 JZ 的代码有一个区别。对于输入元素，datepicker 只会创建一个 ui-datepicker-div 并将其重用于所有需要弹出窗口的输入。但是，如果您使用内联日历，JZ 代码将使其可拖动，而我的则不会，因为它不会具有相同的 id。
啊。感谢您的解释。 +1

【解决方案3】：

您可以在日期选择器中添加一个事件并使用它来使其可拖动。

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

Example jsfiddle

【讨论】：

感谢您的回答。这是一个有趣的想法，但完成与公认答案相同的事情似乎过于复杂。如果不需要的话，我宁愿不要在 jQuery UI 上做一些事情。