如何更改jQuery DatePicker控件的弹出式位置?

Any idea how to get the DatePicker to appear at the end of the associated text box instead of directly below it? What tends to happen is that the text box is towards the bottom of the page and the DatePicker shifts up to account for it and totally covers the text box. If the user wants to type the date instead of pick it, they can't. I'd rather have it appear just after the text box so it doesn't matter how it adjusts vertically.

知道如何让DatePicker出现在关联文本框的末尾而不是直接在它下面吗?通常发生的情况是，文本框位于页面的底部，DatePicker会向上移动，并完全覆盖文本框。如果用户想要输入日期而不是选择日期，他们就不能。我宁愿它出现在文本框之后，所以不管它是如何垂直调整的。

Any idea how to control the positioning? I didn't see any settings for the widget, and I haven't had any luck tweaking the CSS settings, but I could easily be missing something.

知道怎么控制定位吗?我没有看到这个小部件的任何设置，我也没有对CSS设置进行任何调整，但是我很容易丢失一些东西。

20 个解决方案

#1

The accepted answer for this question is actually not for the jQuery UI Datepicker. To change the position of the jQuery UI Datepicker just modify .ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

这个问题的公认答案实际上不是jQuery UI Datepicker。要更改jQuery UI Datepicker的位置，只需在css文件中修改. UI - Datepicker。Datepicker的大小也可以通过这种方式改变，只需调整字体大小。

#2

Here's what I'm using:

这就是我使用:

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    }
});

You may also want to add a bit more to the left margin so it's not right up against the input field.

您可能还想在左边的边缘添加一点，这样它就不会在输入栏上。

#3

I do it directly in the CSS:

我直接在CSS中做:

.ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}

My date input fields are all 100px wide. I also added the z-index so the calendar also appears above AJAX popups.

我的日期输入字段都是100px宽。我还添加了z索引，因此日历也出现在AJAX弹出窗口之上。

I don't modify the jquery-ui CSS file; I overload the class in my main CSS file, so I can change the theme or update the widget without having to re-enter my specific mods.

我不修改jquery- uicss文件;我在主CSS文件中重载了类，所以我可以更改主题或更新小部件，而不必重新输入特定的mods。

#4

Here is my variation of Datepicker calendar aligning.

这是我的Datepicker日历调整。

I think that it's pretty nice, because you can control positioning via jQuery UI Position util.

我认为这很好，因为你可以通过jQuery UI Position util来控制定位。

One restriction: jquery.ui.position.js required.

一个限制:jquery.ui.position。js。

Code:

代码:

$('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);
    }
})

#5

Here is another variation that works well for me, adjust the rect.top + 40, rect.left + 0 to suit your needs:

下面是另一个对我来说很有效的变化，调整一下。

$(".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>

#6

This works for me:

这工作对我来说:

 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);

#7

First I think there should be a afterShowing method in the datepicker object, where you could change the position after jquery has done all its voodoo in the _showDatepicker method. Additionally, a parameter called preferedPosition would be also desirable, so you could set it and jquery modify it in case the dialog is rendered outside the viewport.

首先，我认为在datepicker对象中应该有一个aftershow方法，您可以在jquery在_showDatepicker方法中完成所有的voodoo之后，改变位置。另外，一个名为preferedPosition的参数也是可取的，所以您可以设置它，并且jquery修改它，以防止在viewport之外呈现对话框。

There's a "trick" to do this last thing. If you study the _showDatepicker method, you will see the use of a private variable $.datepikcer._pos. That variable will be setup if nobody has set it up before. If you modify that variable before showing the dialog, Jquery will take it and will try to allocate the dialog in that position, and if it renders out of the screen, it will adjust it to make sure it is visible. Sounds good, eh?

做最后一件事有个“窍门”。如果您研究_showDatepicker方法，您将看到一个私有变量$.datepikcer._pos的使用。如果之前没人设置，这个变量将会被设置。如果您在显示对话框之前修改该变量，Jquery将接受它，并尝试在该位置分配对话框，如果它显示出屏幕，它将调整它以确保它是可见的。听起来不错,不是吗?

Problem is; _pos is private, but if you don't mind that. You can:

问题是;_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
    }
});

But be careful of Jquery-ui updates, because a change in the internal implementation of the _showDatepicker might break your code.

但是要注意Jquery-ui的更新，因为_showDatepicker的内部实现的更改可能会破坏您的代码。

#8

I needed to position the datepicker according to a parent div within which my borderless input control resided. To do it, I used the "position" utility included in jquery UI core. I did this in the beforeShow event. As others commented above, you can't set the position directly in beforeShow, as the datepicker code will reset the location after finishing the beforeShow function. To get around that, simply set the position using setInterval. The current script will complete, showing the datepicker, and then the repositioning code will run immediately after the datepicker is visible. Though it should never happen, if the datepicker isn't visible after .5 seconds, the code has a fail-safe to give up and clear the interval.

我需要根据一个父div定位datepicker，在这个div中，我的无边界输入控件的大小。为了做到这一点，我使用了jquery UI内核中包含的“position”工具。我在前面的事件中做过这个。正如其他人在上面评论的那样，您不能直接在bepre中设置位置，因为datepicker代码将在完成behow函数后重新设置位置。为了解决这个问题，只需使用setInterval设置位置。当前脚本将完成，显示datepicker，然后重新定位代码将在datepicker可见之后立即运行。虽然它不应该发生，但是如果datepicker在.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);
        }

#9

bind focusin after using datepicker change css of datepicker`s widget wish help

在使用datepicker的小部件请求帮助的datepicker更改css后，绑定focusin。

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});

#10

fix show position problem daterangepicker.jQuery.js

修复显示位置问题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();
        }
    }

#11

A very simple jquery function.

一个非常简单的jquery函数。

$(".datepicker").focus(function(event){
                var dim = $(this).offset();
                $("#ui-datepicker-div").offset({
                    top     :   dim.top - 180,
                    left    :   dim.left + 150
                });
            });

#12

I spent a ridiculous amount of time trying to figure this problem out for several pages of a new site I'm developing and nothing seemed to work (including any of the various solutions presented above that I implemented. I'm guessing jQuery has just changed things up enough since they were suggested that the solutions dont' work any longer. I don't know. Honestly, I don't understand why there isn't something simple implemented into the jQuery ui to configure this, as it seems to be a fairly large issue with the calendar always popping up at some position considerably far down the page from the input to which it is attached.

我花了大量的时间试图找出我正在开发的一个新站点的几页的问题，而且似乎没有任何工作(包括我在上面提出的各种解决方案中的任何一个)。我猜jQuery已经改变了很多东西，因为它们被认为解决方案不再工作了。我不知道。老实说，我不明白为什么jQuery ui中没有简单的实现来配置这个，因为它似乎是一个相当大的问题，日历总是出现在页面的某个位置，从它所连接的输入到页面的某个位置。

Anyhow, I wanted an end solution that was generic enough that I could use it anywhere and it would work. I seem to have finally come to a conclusion that avoids some of the more complicated and jQuery-code-specific answers above:

无论如何，我想要一个足够通用的最终解决方案，我可以在任何地方使用它，而且它可以工作。我似乎终于得出了一个结论，避免了以上那些更为复杂和特定于jquery的答案:

jsFiddle: http://jsfiddle.net/mu27tLen/

jsFiddle:http://jsfiddle.net/mu27tLen/

HTML:

HTML:

<input type="text" class="datePicker" />

JS:

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());
});

Essentially I attach a new style tag to the head prior to every datepicker "show" event (deleting the previous one, if present). This method of doing things gets around a large majority of the issues that I ran into during development.

基本上，在每个datepicker“show”事件之前，我都会在head上附加一个新的样式标记(如果存在的话，删除前一个)。这种做事情的方法可以解决我在开发过程中遇到的大部分问题。

Tested on Chrome, Firefox, Safari, and IE>8 (as IE8 doesn't work well with jsFiddle and I'm losing my gusto for caring about

在Chrome、Firefox、Safari和IE>上进行测试(因为IE8与jsFiddle的关系不太好，我也失去了对它的关心)。

I know that this is a mix of jQuery and javascript contexts, but at this point I just don't want to put the effort into converting it to jQuery. Would be simple, I know. I'm so done with this thing right now. Hope someone else can benefit from this solution.

我知道这是jQuery和javascript上下文的混合，但在这一点上，我只是不想把它转换成jQuery。我知道这很简单。我现在对这件事很在行。希望别人能从这个解决方案中受益。

#13

They changed the classname to ui-datepicker-trigger

他们将classname改为ui-datepicker触发器。

So this works in jquery 1.11.x

这在jquery 1。11.x中有效。

.ui-datepicker-trigger { 
margin-top:7px;
  margin-left: -30px;
  margin-bottom:0px;
  position:absolute;
  z-index:1000;
}

#14

I took it from ((How to control positioning of jQueryUI datepicker))

我从(如何控制jQueryUI datepicker的位置)中获取

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

(.extend美元。datepicker， {_checkOffset:函数(inst, offset, isFixed) {return offset});

it works !!!

它的工作原理! ! !

#15

i fixed it with my custom jquery code.

我用定制的jquery代码修复了它。

1. gave my datepicker input field a class ".datepicker2"

   给我的datepicker输入字段一个类“。datepicker2”

2. find its current position from top and

   从顶部找到它的当前位置。

3. positioned the popup box, which class name is ".ui-datepicker"

   定位弹出框，它的类名是“。ui-datepicker”。

here is my code.

这是我的代码。

$('.datepicker2').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

here "40" is my expected pixel, you may change with yours.

这里“40”是我期望的像素，你可以用你的。

#16

It's also worth noting that if IE falls into quirks mode, your jQuery UI components, and other elements, will be positioned incorrectly.

同样值得注意的是，如果IE进入了quirks模式，您的jQuery UI组件和其他元素将被错误定位。

To make sure you don't fall into quirks mode, make sure you set your doctype correctly to the latest HTML5.

为了确保您不会陷入quirks模式，请确保您正确地将doctype设置为最新的HTML5。

<!DOCTYPE html>

Using transitional makes a mess of things. Hopefully this will save someone some time in the future.

过度使用会把事情弄得一团糟。希望这能在将来节省一些时间。

#17

This puts the functionality into a method named function, allowing for your code to encapsulate it or for the method to be made a jquery extension. Just used on my code, works perfectly

这将功能放入名为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);
}

#18

Within Jquery.UI, just update the _checkOffset function, so that viewHeight is added to offset.top, before offset is returned.

在Jquery。UI，只是更新_checkOffset函数，这样viewh8就被添加到偏移量。顶部，在偏移被返回之前。

_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;
    },

#19

.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}

#20

Here is enough to:

这是足以:

$(".date").datepicker({
    beforeShow: function(input, {
        inst.dpDiv.css({
            marginLeft: input.offsetWidth + "px"
        });
    }
});