jquery-ui - jquery ui datepickerの位置を変更するには?

Question

jQuery UI datepickertopのleft位置を変更 (現在の値を取得して変更) することは可能ですか? 他の例のように設定するのではなく、位置を変更する必要があることに注意してください。margin

Answer 1

Sure it is. As there's always only one datepicker active, you can select active datepicker with:

var $datepicker = $('#ui-datepicker-div');

and change its position:

$datepicker.css({
    top: 10,
    left: 10
});

EDIT

Whoah, tricky one. If you set top or left position in beforeShow, it gets overriden again by datepicker plugin. You have to put css changes in a setTimeout:

$("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: 100,
                left: 200
            });
        }, 0);
    }
});

DEMO: http://jsfiddle.net/BWfwf/4/

Explanation about setTimeout(function () {}, 0): Why is setTimeout(fn, 0) sometimes useful?

Answer 2

古い質問かもしれませんが、今日自分で問題に遭遇し、他の提案を機能させることができませんでした。代わりに（を使用して.click(function(){}）修正し、2セントを追加したかった.

sDateクリックすると日付ピッカーが表示されるIDを持つ入力フィールドがあります。

この問題を解決するために私がしたことは、#sDateフィールドにクリック ルーチンを追加することでした。

$('#sDate').click(function(){  //CHANGE sDate TO THE ID OF YOUR INPUT FIELD 
    var pTop = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
    var pLeft = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
    $('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});

Answer 3

日付ピッカー用に以下のようにcssを追加するだけです

.datepicker {
    top: -150px; 
    /* adjust value as per requirement. if not work try with addin !important*/
}