如何更改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的位置？

回答

相关问题