如何更改 jquery ui datepicker 位置？答案

【问题标题】：How to change jquery ui datepicker position?如何更改 jquery ui datepicker 位置？
【发布时间】：2013-02-28 09:07:15
【问题描述】：

是否可以更改jQuery UI datepicker 的top 和left 位置（获取当前值并更改它们）。请注意，我需要更改位置，而不是像在其他示例中那样设置 margin。

【问题讨论】：

stackoverflow.com/questions/14508389/…的可能重复

标签： jquery-ui

【解决方案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);
    }
});

演示：http://jsfiddle.net/BWfwf/4/

关于setTimeout(function () {}, 0)的说明：Why is setTimeout(fn, 0) sometimes useful?

【讨论】：

我需要在初始化时设置
谢谢，但我这样做是因为没有好的解决方案：` jQuery.extend(jQuery.datepicker,{_checkOffset: function(inst, offset, isFixed){offset.top = offset. top - 402; offset.left = offset.left - 240; 返回偏移量;}});`
在某些情况下，您可能希望在 css() 中使用相对定位，例如：top: '+=5px', left: '-=120px'
经过所有的搜索，终于找到了我想要的东西。现在我的日期选择器总是显示在我的输入元素下方。优秀！ +100。

【解决方案2】：

如果你真的卡住了，你可以编辑你的 jquery-ui-[version].custom.js。控制压延机出现位置的函数是：

_findPos: 函数(obj) { 变量位置， 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();
    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];
},

【讨论】：

【解决方案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});
});

【讨论】：

【解决方案4】：

如果您在代码中调用 datepicker 后运行它，您的解决方案就可以工作，我之前尝试过调用它但它不起作用，所以我试图了解它是如何为您工作的。

我已经在页面顶部固定滚动的输入字段的上下文中调整了日期选择器。日期选择器丢失了... 这是我在动态固定的日期选择器上下文中适应的示例代码：

在 w3schools.com 上找到的示例：https://www.w3schools.com/howto/howto_js_sticky_header.asp

HTML：

  <div class="padding-16 center" id="resa_nav">
      <div style="margin: 24px 0 0;">
            <label for="date_selector"
            class="text-gray">Choose a date</label>
            &nbsp;
            <input type="text" id="date_selector" name="date_selector" class="padding-small">
       </div>
   </div>

CSS：

.sticky {
position: fixed;
top: 0;
width: inherit;
background: white;
box-shadow: 0px 0px 7px 4px #69696969;
}

JS：

// init datepicker
$('#date_selector').datepicker();

// When the user scrolls the page, execute myFunction
window.onscroll = function() { myFunction() };

// Get the header
var header = document.getElementById('resa_nav');

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {

        if (window.pageYOffset > sticky) {

                // set block sticky
                header.classList.add('sticky');

                // adjust datepicker position
                // attach a namespace for unbind click later in "non-sticky" context
                $('#date_selector').on('click.sticked', function(){

                        var top = '10px';
                        var left = '10px';

                        $('#ui-datepicker-div').css({'left': left, 'top': top});
                });

        }
        else {

                // remove sticky
                header.classList.remove('sticky');

                // unbind the second event 'click' for retrieve the 
                // default of settings in "non-sticky" context
                $('#date_selector').off('click.sticked');
      }
}
// END FUNCTION

希望能提供帮助！

【讨论】：

【解决方案5】：

只需为 datepicker 添加如下 css

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

【讨论】：