jQuery 如何控制 jQueryUI 日期选择器的定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1818670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control positioning of jQueryUI datepicker
提问by Purrell
The datepicker in jQueryUI renders with a dynamic position. It renders according to its css if there's enough room for it, but if there isn't enough window space it tries to render on screen. I need it to stay put and render in the same place every time, independent of the screen position or other circumstances. How can this be done with the jQueryUI datepicker? Other implementations of jQuery datepicker seem to have ways of doing this, but I don't see a way of doing it for the UI version.
jQueryUI 中的日期选择器以动态位置呈现。如果有足够的空间，它会根据它的 css 进行渲染，但如果没有足够的窗口空间，它会尝试在屏幕上渲染。我需要它每次都保持原地不动并在同一个地方渲染，而不受屏幕位置或其他情况的影响。如何使用 jQueryUI 日期选择器完成此操作？jQuery datepicker 的其他实现似乎有这样做的方法，但我看不到 UI 版本的方法。
The answer doesn't seem to be just modifying the css:
答案似乎不仅仅是修改 css：
.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}
...since when the datepicker is created it dynamically creates top and left in element style. Haven't found a way around this yet. One approach I saw is to give something like this in the beforeShow option:
...自从创建日期选择器后，它会在元素样式中动态创建顶部和左侧。还没有找到解决这个问题的方法。我看到的一种方法是在 beforeShow 选项中提供类似的内容：
beforeShow: function(input,inst){
inst.dpDiv.css({
'top': input.offsetHeight+ 'px',
'left':(input.offsetWidth - input.width)+ 'px'
});
}
This has some effect but the top and left properties are still being dynamically set after this is run when the datepicker renders. It's still trying to render on screen. How do I get it to always render in the same spot? My next step is probably to go into the datepicker guts and start pulling things out. Any ideas?
这有一些效果，但在日期选择器呈现时运行后仍然动态设置 top 和 left 属性。它仍在尝试在屏幕上呈现。如何让它始终在同一位置渲染？我的下一步可能是进入日期选择器的胆量并开始拉出东西。有任何想法吗？
Note that the answer (for the UI version) is not in:
请注意，答案（对于 UI 版本）不在：
回答by JaredC
Posting this in hopes that it will help others. At least as of v1.8.1 of datepicker, using 'window.DP_jQuery.datepicker' no longer works, because the pointer(right term?) now is named with a timestamp of its creation - so for example it would now be 'window.DP_jQuery_1273700460448'. So now, rather than using the pointer to the datepicker object, refer to it directly like this:
发布此信息，希望对其他人有所帮助。至少从 datepicker 的 v1.8.1 开始，使用 'window.DP_jQuery.datepicker' 不再有效，因为指针（正确的术语？）现在以其创建的时间戳命名 - 例如它现在是 'window.datepicker'。 DP_jQuery_1273700460448'。所以现在，与其使用指向 datepicker 对象的指针，不如直接像这样引用它：
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
Many thanks for the answer below for getting me what I needed.
非常感谢下面的回答让我得到了我需要的东西。
回答by Purrell
Edit:JaredC gave an updated answer for later versions of jQuery above. Switching accepted answer to that.
编辑：JaredC 为上述 jQuery 的更高版本提供了更新的答案。切换接受的答案。
Alright, this is a matter of monkeypatching the feature it has of attempting to always render in the viewport since there's no option provided to enable/disable the feature. Luckily it's uncoupled and isolated in one function so we can just go in and override it. The following code completely disables that feature only:
好的，这是一个猴子修补它试图始终在视口中呈现的功能的问题，因为没有提供启用/禁用该功能的选项。幸运的是，它在一个函数中被解耦和隔离，所以我们可以直接进入并覆盖它。以下代码仅完全禁用该功能：
$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
_checkOffset is called when it's opening and it does calculations on the offset and returns a new offset if it would otherwise be outside of the view port. This replaces the function body to just pass the original offset right through. Then you can use the beforeShow setting hack and/or the .ui-datepicker css class to put it wherever you want.
_checkOffset 在打开时被调用，它会计算偏移量并返回一个新的偏移量，否则它会在视口之外。这将替换函数体以直接传递原始偏移量。然后你可以使用 beforeShow 设置 hack 和/或 .ui-datepicker css 类将它放在任何你想要的地方。
回答by anubiskong
bind focusin after using datepicker change css of datepicker`s widget wish help
使用 datepicker 更改 datepicker 小部件的 css 后绑定焦点希望帮助
$('input.date').datepicker();
$('input.date').focusin(function(){
$('input.date').datepicker('widget').css({left:"-=127"});
});
回答by mpen
The problem I was having is that the datepicker is positioned incorrectly inside fixed elements, such as fancy/lightboxes. For some reason, the datepicker switches into "fixed" positioning mode when this happens, and then the offset calculation becomes incorrect, when absolute positioning would have worked just fine.
我遇到的问题是日期选择器在固定元素（例如花式/灯箱）中的位置不正确。出于某种原因，发生这种情况时，日期选择器会切换到“固定”定位模式，然后偏移计算变得不正确，而绝对定位本来可以正常工作。
However, we can get the correct fixed position with this hack:
但是，我们可以通过这个 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,
};
}
});
回答by Liviu Alexandru Bobocu
with jQuery:
使用 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);
}
回答by sebsonic2o
The accepted answer works very well overall.
接受的答案总体上非常有效。
However, using jQuery UI v1.11.4, I had an issue where the datepicker would position itself away from the input in a modal window (fixed positioning) when the browser window has been scrolled down. I was able to fix this problem editing the accepted answer as follows:
但是，使用 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;
}
}
});
回答by Pardeep Goyal
$("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>
回答by obeliksz
This is how it worked out for me:
这对我来说是这样的：
$( "input[name='birthdate']" ).datepicker({
beforeShow : function(input,inst){
window.setTimeout(function () {
$("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: input });
}, 1);
}
});
To get it positioned when the screen gets resized:
要在屏幕调整大小时将其定位：
$(window).resize(function(){ $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: "input[name='birthdate']" }); });
回答by Joe Lalgee
In your css file, for example:
在你的 css 文件中，例如：
#ui-datepicker-div {
position: absolute !important;
top: auto !important;
left: auto !important;
}
Your important settings, whatever they are, will override the inline defaults.
您的重要设置，无论它们是什么，都将覆盖内联默认值。
回答by Sudeep
earlier i tried giving top, left in beforeShow event of datepicker.js, that's get override by _showDatePicker method of jquery-ui-custom.js . But after timeout the window its working fine. Below is the code
早些时候我尝试给出顶部，留在 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);
}
