如何更改jquery ui datepicker的位置？

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

2013-02-28 Kin

http://stackoverflow.com/questions/14508389/jquery-datepicker-change-position-dynamically的可能的複製 – starryknight64 2013-09-16 16:11:25

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

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?

來源

2013-02-28 09:12:45 iappwebdev

我需要把它放在初始化 – Kin 2013-02-28 09:16:09

我會更新我的答案。 – iappwebdev 2013-02-28 09:17:18

謝謝，但我做我的方式，因爲沒有好的解決方案：'\t jQuery.extend（jQuery.datepicker，{_ checkOffset：function（inst，offset，isFixed）{offset.top = offset.top - 402; offset。 left = offset.left - 240; return offset;}}）;' – Kin 2013-02-28 09:43:58

如果你得到真正卡住，您可以編輯您的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]; 
},

來源

2014-05-31 15:32:32

可能是一個老問題，但今天自己遇到了問題，無法獲得其他建議。修正它或者（使用.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}); 
});

來源

2014-11-27 09:51:26 IIIOXIII

如何更改jquery ui datepicker的位置？

回答

相關問題