如何更改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代码修复它。

  1. 给我的dateselect器input字段类“ .datepicker2

  2. 从上面find它的当前位置

  3. 定位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" }); } });