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 プラグインは、すべてのポップアップに対して 1 つの 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

日付ピッカーにイベントを追加し、それを使用してドラッグ可能にすることができます。

//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 の例

于 2012-09-06T13:52:10.227 に答える