5

（希望）简单的问题：

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

4

3 回答 3

9

$(".ui-datepicker").draggable() 不起作用？

于 2009-04-11T17:07:38.780 回答
6

顺序很重要。

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

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

您可以在 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);
    }
};

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

于 2012-09-06T13:52:10.227 回答