35

jQueryUI 中的日期选择器以动态位置呈现。如果有足够的空间，它会根据其 css 进行渲染，但如果没有足够的窗口空间，它会尝试在屏幕上渲染。我需要它每次都保持原样并在同一个地方渲染，与屏幕位置或其他情况无关。jQueryUI 日期选择器如何做到这一点？jQuery datepicker 的其他实现似乎有这样做的方法，但我看不到 UI 版本的方法。

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

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

...自从创建日期选择器后，它会以元素样式动态创建顶部和左侧。还没有找到解决这个问题的方法。我看到的一种方法是在 beforeShow 选项中给出类似的内容：

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

这有一些效果，但在日期选择器呈现时运行后，top 和 left 属性仍会动态设置。它仍在尝试在屏幕上渲染。如何让它始终在同一个位置渲染？我的下一步可能是进入 datepicker 的胆量并开始把东西拉出来。有任何想法吗？

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

4

13 回答 13

66

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

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

非常感谢下面的答案让我得到了我需要的东西。

于 2010-05-12T21:53:06.763 回答
10

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

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

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

_checkOffset 在打开时被调用，它会计算偏移量并返回一个新的偏移量，否则它会在视口之外。这将替换函数体以直接传递原始偏移量。然后，您可以使用 beforeShow 设置技巧和/或 .ui-datepicker css 类将其放置在您想要的任何位置。

于 2009-11-30T20:21:45.070 回答
6

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

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});
于 2013-02-22T09:09:15.750 回答
4

使用 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);
}
于 2016-06-06T19:43:50.793 回答
4

我遇到的问题是日期选择器在固定元素内的位置不正确，例如花式/灯箱。出于某种原因，当发生这种情况时，日期选择器会切换到“固定”定位模式，然后偏移计算变得不正确，而绝对定位本来可以正常工作。

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

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,
        };
    }
});
于 2016-06-02T18:13:07.413 回答
1

早些时候我尝试在 datepicker.js 的 beforeShow 事件中给出 top，left 被 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);
}
于 2014-06-18T14:22:16.447 回答
1

在您的 css 文件中，例如：

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

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

于 2012-10-12T14:41:11.123 回答
1

接受的答案总体上效果很好。

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

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
  _checkOffset: function(inst, offset, isFixed) {
    if(isFixed) {
      return checkOffset.apply(this, arguments);
    } else {
      return offset;
    }
  }
});
于 2016-08-01T18:20:10.793 回答
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>
于 2018-04-19T11:37:39.850 回答
1

这对我来说是这样的：

$( "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']" }); });
于 2018-08-17T06:45:50.050 回答
1

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

之所以会出现此问题，是因为向下滚动页面时，模式中输入的偏移量相对于滚动页面的顶部发生了变化。由此产生的行为将意味着日期选择器将呈现在不同的垂直位置，具体取决于您向下滚动页面的距离（注意：虽然可见和滚动日期选择器已经固定）。这个问题的解决方案（“嵌套在模式中的 datepicker 输入”）是计算输入相对于视图屏幕的垂直定位，然后添加输入的高度（允许 datepicker 的“top”css 属性在输入的正下方）。

以下代码段位于咖啡脚本中。我们不是按照@JaredC 的解决方案返回常规偏移量，而是从“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;
    }
});
于 2016-03-09T20:39:30.470 回答
-1

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

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find('.ui-datepicker').css('margin-left', '-50px');
于 2013-02-09T21:22:29.190 回答
-1

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

$(document).ready(function() {
$(".ui-datepicker").css('margin-left', '-50px', 'margin-top', '-50px');
//... 
}
于 2015-06-25T15:56:26.370 回答