如何控制jQueryUI datepicker的定位

时间：2009-11-30 09:07:49

标签： jquery jquery-ui datepicker uidatepicker

jQueryUI中的datepicker呈现动态位置。它根据它的css呈现是否有足够的空间，但如果没有足够的窗口空间，它会尝试在屏幕上呈现。我需要它每次都保持放置并在同一个地方渲染，与屏幕位置或其他情况无关。如何使用jQueryUI datepicker完成这项工作？ jQuery datepicker的其他实现似乎有办法实现这一点，但我没有看到为UI版本执行此操作的方法。

答案似乎不仅仅是修改css：

.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}

...因为在创建datepicker时，它会动态创建元素样式的top和left。尚未找到解决方法。我看到的一种方法是在beforeShow选项中给出类似的东西：

beforeShow: function(input,inst){
                                inst.dpDiv.css({ 
                                   'top': input.offsetHeight+ 'px', 
                                   'left':(input.offsetWidth - input.width)+ 'px'
                                               });
                                }

这有一些效果，但在datepicker渲染后运行此属性时仍会动态设置top和left属性。它仍然试图在屏幕上呈现。如何让它始终在同一位置渲染？我的下一步可能是进入datepicker胆量并开始拉出来。有什么想法吗？

请注意，答案（对于UI版本）不在：

13 个答案:

答案 0 :(得分：65)

发布此信息希望能帮助他人。至少从datepicker的v1.8.1开始，使用'window.DP_jQuery.datepicker'不再有效，因为指针（右项？）现在以其创建的时间戳命名 - 例如现在它将是'window。 DP_jQuery_1273700460448' 。所以现在，不是使用指向datepicker对象的指针，而是直接引用它：

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

非常感谢下面给出我需要的答案。

答案 1 :(得分：9)

编辑：JaredC为上面的jQuery版本提供了更新的答案。切换接受的答案。

好吧，这是一个monkeypatching它尝试始终在视口中渲染的功能的问题，因为没有提供启用/禁用该功能的选项。幸运的是它在一个函数中解耦并隔离，所以我们可以进入并覆盖它。以下代码仅完全禁用该功能：

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

_checkOffset在打开时被调用，并且它对偏移量进行计算并返回一个新的偏移量，否则它将在视图端口之外。这将替换函数体直接传递原始偏移量。然后你可以使用beforeShow设置hack和/或.ui-datepicker css类把它放在你想要的任何地方。

答案 2 :(得分：6)

使用datepicker后绑定focusin 更改datepicker的小部件的CSS 希望得到帮助

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});

答案 3 :(得分：3)

使用jQuery：

beforeShow : function(input,inst){
    var offset = $(input).offset();
    var height = $(input).height();
    window.setTimeout(function () {
        $(inst.dpDiv).css({ top: (offset.top + height) + 'px', left:offset.left + 'px' })
    }, 1);
}

答案 4 :(得分：2)

我遇到的问题是，日期选择器未正确定位在固定元素内，例如花式/灯箱。出于某种原因，datepicker切换到＆＃34; fixed＆＃34;发生这种情况时的定位模式，然后当绝对定位工作得很好时，偏移计算就会变得不正确。

但是，我们可以通过这个黑客获得正确的固定位置：

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        if(!isFixed) {
            return checkOffset.apply(this, arguments);
        }

        let isRTL = this._get(inst, "isRTL");
        let obj = inst.input[0];

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

        let rect = obj.getBoundingClientRect();

        return {
            top: rect.top,
            left: rect.left,
        };
    }
});

答案 5 :(得分：1)

在您的css文件中，例如：

#ui-datepicker-div {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
}

您的重要设置，无论它们是什么，都将覆盖内联默认设置。

答案 6 :(得分：1)

之前我试过在datepicker.js的beforeShow事件中给出顶部，左边是jquery-ui-custom.js的_showDatePicker方法。 但是超时后窗口工作正常。以下是代码

beforeShow : function(input,inst) {
  var offset = js.select("#" + dpId).offset();
                        var height = js.select("#" + dpId).height();
                        var width = js.select("#" + dpId).width();
                        window.setTimeout(function () {
                              js.select(inst.dpDiv).css({ top: (offset.top + height - 185) + 'px', left: (offset.left + width + 50) + 'px' })
                        }, 1);
}

答案 7 :(得分：1)

这是一个相当古老的问题但是我最近遇到了与jQuery UI Datepicker类似的问题。我们之前已经使用了@JaredC发布的解决方案（特别是此代码片段：$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});）但是它不适用于具有我们需要呈现下拉列表的输入的模式。

会出现此问题，因为向下滚动页面时，模式中输入的偏移量会相对于滚动页面的顶部发生变化。结果行为意味着日期选择器将根据您向下滚动页面的距离呈现在不同的垂直位置（注意：虽然可见并滚动日期选择器已经修复）。这个问题的解决方案（＆＃34;嵌套在模态＆＃34;中的＃34; datepicker输入）是相对于视图屏幕计算输入的垂直位置，然后添加输入的高度（允许＆＃34; top＆＃34; css属性的datepicker正好在输入的下方。）

以下代码段位于coffeescript中。我们不是根据@JaredC的解决方案返回常规偏移量，而是从“＆＃39; inst”中获取输入的elementId。对象然后通过jquery访问对象，以便使用它来计算屏幕顶部相对于视口的输入距离。 

# CoffeeScript
$.extend( $.datepicker, { _checkOffset: (inst,offset,isFixed) ->
        offset.top = $("##{inst.id}").offset().top - $(window).scrollTop() + $("##{inst.id}")[0].getBoundingClientRect().height
        offset
    }
)

// JavaScript
$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        offset.top = $("#" + inst.id).offset().top - $(window).scrollTop() + $("#" + inst.id)[0].getBoundingClientRect().height;
        return offset;
    }
});

答案 8 :(得分：1)

接受的答案整体上非常有效。

然而，使用jQuery UI v1.11.4时，我遇到了一个问题，当浏览器窗口向下滚动时，datepicker会将自己定位在模态窗口（固定定位）中的输入之外。我能够解决这个问题，编辑接受的答案如下：

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
  _checkOffset: function(inst, offset, isFixed) {
    if(isFixed) {
      return checkOffset.apply(this, arguments);
    } else {
      return offset;
    }
  }
});

答案 9 :(得分：1)

$("first-selector").datepicker().bind('click',function () {
      $("#ui-datepicker-div").appendTo("other-selector");
});

<style>
#ui-datepicker-div {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 99999999 !important;
}
</style>

答案 10 :(得分：0)

这对我来说是这样的：

$( "input[name='birthdate']" ).datepicker({
    beforeShow : function(input,inst){
    window.setTimeout(function () {
        $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: input });
    }, 1);
    }
});

要在调整屏幕大小时定位它：

$(window).resize(function(){ $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: "input[name='birthdate']" }); });

答案 11 :(得分：-1)

这是一个更简单的解决方案

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find('.ui-datepicker').css('margin-left', '-50px');

答案 12 :(得分：-1)

默认情况下，日期选择器的日历显示在输入框的右上角，因此我的菜单栏隐藏了它的顶部。以下是我非常简单地定位窗口小部件（jquery-ui版本1.11.4）的方法（注意'ui-datepicker'是jquery-ui给出的类名）：

["constructor", "toString", "toLocaleString", "join", "pop", "push", "concat", "reverse", "shift", "unshift", "slice", "splice", "sort", "filter", "forEach", "some", "every", "map", "indexOf", "lastIndexOf", "reduce", "reduceRight", "entries", "keys", "constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "__defineGetter__", "__lookupGetter__", "__defineSetter__", "__lookupSetter__"]
相关问题
最新问题