如何更改jQuery DatePicker控件的popup位置
任何想法如何让DatePicker出现在相关文本框的最后，而不是直接在它的下面？ 最容易发生的是，文本框朝向页面的底部，DatePicker向上移动以解释它，并完全覆盖文本框。 如果用户想inputdate而不是selectdate，他们不能。 我宁愿让它出现在文本框的后面，所以无论垂直调整如何。
任何想法如何控制定位？ 我没有看到任何部件的设置，我没有任何运气调整CSS设置，但我可以很容易地错过了一些东西。
这个问题被接受的答案实际上不是jQuery UI Datepicker。 要更改jQuery UI Datepicker的位置，只需在css文件中修改.ui-datepicker即可。 Datepicker的大小也可以这样改变，只需调整字体大小即可。
以下是我正在使用的：
$('input.date').datepicker({ beforeShow: function(input, inst) { inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'}); } }); 您可能还需要添加一些更多的左边距，所以它不正确的input字段。
我直接在CSS中：
.ui-datepicker { margin-left: 100px; z-index: 1000; }
我的dateinput字段都是100px宽。 我还添加了Z-index，这样日历也出现在AJAXpopup窗口之上。
我不修改jquery-ui CSS文件; 我在我的主要CSS文件中重载类，所以我可以改变主题或更新小部件，而不必重新input我特定的MODS。
这是Datepicker日历alignment的变体。
我认为这是相当不错的，因为你可以通过jQuery UI Position util来控制定位。
一个限制：需要jquery.ui.position.js。
码：
$('input[name=date]').datepicker({ beforeShow: function(input, inst) { // Handle calendar position before showing it. // It's not supported by Datepicker itself (for now) so we need to use its internal variables. var calendar = inst.dpDiv; // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20) setTimeout(function() { calendar.position({ my: 'right top', at: 'right bottom', collision: 'none', of: input }); }, 1); } })
这里是另一个适合我的变化，调整rect.top + 40，rect.left + 0以满足您的需求：
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/dd/yy', beforeShow: function (input, inst) { var rect = input.getBoundingClientRect(); setTimeout(function () { inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); }, 0); } });
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <form> <input class="datepicker" name="date1" type="text"> <input class="datepicker" name="date2" type="text"> </form>
这适用于我：
beforeShow: function(input, inst) { var cal = inst.dpDiv; var top = $(this).offset().top + $(this).outerHeight(); var left = $(this).offset().left; setTimeout(function() { cal.css({ 'top' : top, 'left': left }); }, 10);
首先，我认为在afterShowing对象中应该有一个afterShowing方法，你可以在jquery在_showDatepicker方法中完成所有的voodoo之后改变位置。 此外，一个名为preferedPosition的参数也是可取的，所以你可以设置它和jQuery的修改，以防对话框渲染到视口之外。
做最后一件事情有一个“窍门”。 如果您学习_showDatepicker方法，您将看到使用私有variables$.datepikcer._pos 。 如果以前没有人设置过，那个variables就会被设置。 如果你在显示对话框之前修改了这个variables，Jquery将会接受它，并尝试在该位置分配对话框，如果它在屏幕之外渲染，它将调整它以确保它可见。 听起来不错，呃？
问题在于; _pos是私人的，但如果你不介意的话。 您可以：
$('input.date').datepicker({ beforeShow: function(input, inst) { $.datepicker._pos = $.datepicker._findPos(input); //this is the default position $.datepicker._pos[0] = whatever; //left $.datepicker._pos[1] = whatever; //top } });
但要小心Jquery-ui更新，因为_showDatepicker内部实现的_showDatepicker可能会破坏您的代码。
我需要根据我的无边界input控件所在的父div来定位dateselect器。 要做到这一点，我使用jQuery UI内核中包含的“位置”实用工具。 我在beforeShow事件中做了这个。 正如其他人上面所说的，你不能直接在beforeShow中设置位置，因为datepicker代码将在完成beforeShow函数之后重置位置。 为了解决这个问题，只需使用setInterval设置位置即可。 当前的脚本将完成，显示dateselect器，然后重新定位代码将在dateselect器可见后立即运行。 尽pipe不应该发生，如果dateselect器在0.5秒后不可见，代码具有放弃和清除间隔的故障保险。
beforeShow: function(a, b) { var cnt = 0; var interval = setInterval(function() { cnt++; if (b.dpDiv.is(":visible")) { var parent = b.input.closest("div"); b.dpDiv.position({ my: "left top", at: "left bottom", of: parent }); clearInterval(interval); } else if (cnt > 50) { clearInterval(interval); } }, 10); }
绑定focusin使用datepicker后更改dateselect器的小部件希望帮助的CSS
$('input.date').datepicker(); $('input.date').focusin(function(){ $('input.date').datepicker('widget').css({left:"-=127"}); });
修复显示位置问题daterangepicker.jQuery.js
//Original Code //show, hide, or toggle rangepicker function showRP() { if (rp.data('state') == 'closed') { rp.data('state', 'open'); rp.fadeIn(300); options.onOpen(); } } //Fixed //show, hide, or toggle rangepicker function showRP() { rp.parent().css('left', rangeInput.offset().left); rp.parent().css('top', rangeInput.offset().top + rangeInput.outerHeight()); if (rp.data('state') == 'closed') { rp.data('state', 'open'); rp.fadeIn(300); options.onOpen(); } }
我花了大量的时间试图解决这个问题，我正在开发一个新网站的几个页面，似乎没有任何工作（包括上面提到的各种解决scheme，我实现了我猜jQuery刚刚改变了我不知道，老实说，我不明白为什么没有简单的实现到jQuery UI来configuration它，因为它似乎是日历中的一个相当大的问题总是在相关input页面的某个位置popup。
无论如何，我想要一个足够通用的最终解决scheme，我可以在任何地方使用它，它会工作。 我似乎终于得出了一个结论，避免了上面一些更复杂和jQuery代码特定的答案：
jsFiddle： http : //jsfiddle.net/mu27tLen/
HTML：
<input type="text" class="datePicker" />
JS：
positionDatePicker= function(cssToAdd) { /* Remove previous positioner */ var oldScript= document.getElementById('datePickerPosition'); if(oldScript) oldScript.parentNode.removeChild(oldScript); /* Create new positioner */ var newStyle= document.createElement("style"); newStyle.type= 'text/css'; newStyle.setAttribute('id', 'datePickerPostion'); if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd; else newStyle.appendChild(document.createTextNode(cssToAdd)); document.getElementsByTagName("head")[0].appendChild(newStyle); } jQuery(document).ready(function() { /* Initialize date picker elements */ var dateInputs= jQuery('input.datePicker'); dateInputs.datepicker(); dateInputs.datepicker('option', { 'dateFormat' : 'mm/dd/yy', 'beforeShow' : function(input, inst) { var bodyRect= document.body.getBoundingClientRect(); var rect= input.getBoundingClientRect(); positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}'); } }).datepicker('setDate', new Date()); });
基本上，我在每个datepicker“show”事件之前在头部添加一个新的样式标签（删除前一个，如果存在的话）。 这种做事的方法解决了我在开发过程中遇到的大部分问题。
在Chrome浏览器，火狐浏览器，Safari浏览器和IE> 8testing（因为IE8不能很好地与jsFiddle工作，我正在失去我的关心关心
我知道这是jQuery和javascript上下文的混合，但是在这一点上，我只是不想把努力转换成jQuery。 我知道，会很简单。 我现在就这样做了 希望别人能从这个解决scheme中受益。
他们改变了类ui-datepicker-trigger
所以这个工作在jquery 1.11.x
.ui-datepicker-trigger { margin-top:7px; margin-left: -30px; margin-bottom:0px; position:absolute; z-index:1000; }
我把它从（（ 如何控制jQueryUI datepicker的定位 ））
$ .extend（$。datepicker，{_checkOffset：function（inst，offset，isFixed）{return offset}}）;
有用 ！！！
我用我的自定义jquery代码修复它。
-
给我的dateselect器input字段类“ .datepicker2 ”
-
从上面find它的当前位置
-
定位popup框，哪个类名是“ .ui-datepicker ”
这是我的代码。
$('.datepicker2').click(function(){ var popup =$(this).offset(); var popupTop = popup.top - 40; $('.ui-datepicker').css({ 'top' : popupTop }); });
这里的“40”是我预期的像素，你可以随你的改变。
还值得注意的是，如果IE浏览器陷入怪癖模式，你的jQuery UI组件和其他元素将被错误地定位。
为了确保您不会陷入怪癖模式，请确保您的文档types正确设置为最新的HTML5。
<!DOCTYPE html>
使用过渡使事情变得糟糕。 希望这将在未来挽回一些时间。
这将function放到一个名为function的方法中，允许你的代码封装它，或者让方法成为一个jQuery扩展。 刚刚使用我的代码，完美的作品
var nOffsetTop = /* whatever value, set from wherever */; var nOffsetLeft = /* whatever value, set from wherever */; $(input).datepicker ( beforeShow : function(oInput, oInst) { AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft); } ); /* can be converted to extension, or whatever*/ var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft) { var divContainer = oInst.dpDiv; var oElem = $(this); oInput = $(oInput); setTimeout(function() { divContainer.css ({ top : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)), left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1)) }); }, 10); }
在Jquery.UI中，只需更新_checkOffset函数，以便在返回偏移量之前将viewHeight添加到offset.top。
_checkOffset: function(inst, offset, isFixed) { var dpWidth = inst.dpDiv.outerWidth(), dpHeight = inst.dpDiv.outerHeight(), inputWidth = inst.input ? inst.input.outerWidth() : 0, inputHeight = inst.input ? inst.input.outerHeight() : 0, viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()), viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop)); offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0); offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0; offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0; // now check if datepicker is showing outside window viewport - move to a better place if so. offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0); offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(dpHeight + inputHeight) : 0); **offset.top = offset.top + viewHeight;** return offset; },
一个非常简单的jquery函数。
$(".datepicker").focus(function(event){ var dim = $(this).offset(); $("#ui-datepicker-div").offset({ top : dim.top - 180, left : dim.left + 150 }); });
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
这足以：
$(".date").datepicker({ beforeShow: function(input, { inst.dpDiv.css({ marginLeft: input.offsetWidth + "px" }); } });
