Question

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

Answer 1

当然可以。由于始终只有一个日期选择器处于活动状态，因此您可以选择活动的日期选择器：

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

并改变其立场：

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

修改

哇，狡猾的。如果您在beforeShow中设置了顶部或左侧位置，则会被datepicker插件再次覆盖。您必须在setTimeout：
中添加css更改
$("#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-ui- [版本] .custom.js。控制日历将出现的位置的功能是：

_findPos：function（obj）{ var位置， 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];
},

Answer 3

可能是一个老问题，但是我自己今天遇到了这个问题而无法获得其他建议。修正了它（使用.click(function(){}）并希望加上我的两分钱。

我有一个标识为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});
});

Answer 4

只需为 datepicker 添加如下 css

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

Answer 5

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

我在输入字段的上下文中调整了日期选择器，该输入字段固定在页面顶部以滚动。日期选择器丢失了... 这是我在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

希望能提供帮助！

如何更改jquery ui datepicker的位置？

5 个答案: