如何更改jquery ui datepicker的位置？

Question

是否可以更改top和left的位置（獲取當前值並更改它們）jQuery UI datepicker。請注意，我需要更改位置，而不是像在其他示例中那樣設置margin。

Answer 1

當然可以。由於有永遠只有一個活動的日期選擇器，您可以選擇有效的日期選擇器：

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

，改變自己的立場：

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

編輯

哇，很微妙的。如果您在beforeShow中設置了頂部或左側位置，則它會被datepicker插件再次覆蓋。你必須把CSS改變一個setTimeout：

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

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

說明有關setTimeout(function() {}, 0)：Why is setTimeout(fn, 0) sometimes useful?

Answer 2

如果你得到真正卡住，您可以編輯您的jQuery的用戶界面 - [版本]。 custom.js。

_findPos：：控制其中砑光機將出現是位置的函數功能（OBJ）{ VAR位置， 研究所= this._getInst（OBJ）， isRTL = this._get（研究所， 「isRTL」 ）;

while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? "previousSibling" : "nextSibling"]; 
    } 

    position = $(obj).offset(); 
    return [position.left, position.top]; 
}, 

我有一些自定義代碼，它使用CSS3轉換根據其寬度縮放頁面。這將拋出日曆小部件依賴的屏幕座標。我向_findPos添加了一些自定義代碼來檢測和處理縮放級別。修改後的代碼如下所示：

_findPos: function(obj) { 
    var position, 
     inst = this._getInst(obj), 
     isRTL = this._get(inst, "isRTL"); 

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? "previousSibling" : "nextSibling"]; 
    } 

    position = $(obj).offset(); 
    /* Custom Code for Zoom */ 
    var zoomLevel = 1; 
    var minW = 1024; 
    if ($(window).width() > minW) 
       { zoomLevel = $(window).width()/minW;} 
    return [position.left, position.top/zoomLevel]; 
}, 

Answer 3

可能是一個老問題，但今天自己遇到了問題，無法獲得其他建議。修正它或者（使用.click(function(){}），並想增加我的兩美分。

我有一個輸入字段，其ID爲sDate，點擊時顯示日期選擇器。

我所做的解決問題的方法是在#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}); 
});