如何控制 jQueryUI 日期选择器的定位 [英] How to control positioning of jQueryUI datepicker

问题描述

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

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.

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

The answer doesn't seem to be just modifying the css:

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

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

...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: function(input,inst){
                                inst.dpDiv.css({ 
                                   'top': input.offsetHeight+ 'px', 
                                   'left':(input.offsetWidth - input.width)+ 'px'
                                               });
                                }

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

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?

请注意，答案(对于 UI 版本)不在:

Note that the answer (for the UI version) is not in:

• how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
• change-the-position-of-jquery-ui-datepicker

推荐答案

发帖希望能帮助到其他人.至少从 datepicker 的 v1.8.1 开始，使用 'window.DP_jQuery.datepicker' 不再有效，因为指针(正确的术语?)现在以其创建的时间戳命名 - 例如它现在是 'window.datepicker'.DP_jQuery_1273700460448'.所以现在，与其使用指向 datepicker 对象的指针，不如直接像这样引用它:

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:

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

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

Many thanks for the answer below for getting me what I needed.

这篇关于如何控制 jQueryUI 日期选择器的定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！