Question

知道如何让DatePicker出现在相关文本框的末尾而不是直接位于其下方吗？容易发生的是文本框朝向页面底部，DatePicker向上移动以占用它并完全覆盖文本框。如果用户想要输入日期而不是选择日期，则他们不能。我宁愿让它出现在文本框之后，所以无论它如何垂直调整都无关紧要。

知道如何控制定位吗？我没有看到小部件的任何设置，我没有运气调整CSS设置，但我很容易丢失一些东西。

Answer 1

以下是我正在使用的内容：

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

您可能还想向左边距添加更多内容，因此它不会直接对输入字段。

Answer 2

我直接在CSS中执行：

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

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

我不修改jquery-ui CSS文件;我在主CSS文件中重载了这个类，所以我可以更改主题或更新小部件而无需重新输入我的特定mod。

Answer 3

这是我对Datepicker日历对齐的变体。

我认为它非常好，因为你可以通过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);
    }
})

Answer 4

此问题的接受答案实际上不适用于jQuery UI Datepicker。要更改jQuery UI Datepicker的位置，只需在css文件中修改.ui-datepicker即可。也可以通过这种方式更改Datepicker的大小，只需调整字体大小。

Answer 5

这是另一个适用于我的变体，调整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>

Answer 6

这对我有用：

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

Answer 7

首先我认为在datepicker对象中应该有一个afterShowing方法，你可以在jquery在_showDatepicker方法中完成所有voodoo之后改变位置。此外，还需要一个名为preferedPosition的参数，因此您可以设置它，并且jquery会修改它，以防对话框在视口外部呈现。

最后这件事有一个“诀窍”。如果您研究_showDatepicker方法，则会看到使用私有变量$.datepikcer._pos。如果之前没有人设置过，那么该变量将被设置。如果在显示对话框之前修改该变量，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的内部实现的更改可能会破坏您的代码。

Answer 8

我需要根据我的无边界输入控件所在的父div来定位日期选择器。为此，我使用了jquery UI核心中包含的“position”实用程序。我在beforeShow事件中这样做了。正如其他人在上面评论的那样，你无法直接在beforeShow中设置位置，因为datepicker代码将在完成beforeShow函数后重置位置。要解决这个问题，只需使用setInterval设置位置即可。当前脚本将完成，显示日期选择器，然后重新定位代码将在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);
        }

Answer 9

使用datepicker后绑定focusin 更改datepicker的小部件的CSS 希望得到帮助

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

Answer 10

我用我的自定义jquery代码修复它。

为我的datepicker输入字段提供了一个＆＃34; .datepicker2 ＆＃34;
从顶部找到当前位置
找到了弹出框，其中的班级名称为＆＃34; .ui-datepicker ＆＃34;

这是我的代码。

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

这里＆＃34; 40＆＃34;是我预期的像素，你可能会改变你的像素。

Answer 11

一个非常简单的jquery函数。

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

Answer 12

我花费了大量时间试图解决这个问题，我正在开发一个新网站的几个页面，似乎没有任何工作（包括上面介绍的任何我实现的各种解决方案。我猜jQuery刚刚改变了一切，因为他们被建议解决方案不再工作了。我不知道。老实说，我不明白为什么没有简单的实现到jQuery ui来配置它，因为它似乎是一个相当大的问题，日历总是突然出现在页面相当远的位置，从它所连接的输入开始。

无论如何，我想要一个足够通用的终端解决方案，我可以在任何地方使用它，它会起作用。我似乎终于得出结论，避免了上面一些更复杂和特定于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());
});

基本上我在每个日期选择器“show”事件之前将一个新的样式标记附加到头部（删除前一个，如果存在）。这种处理方法解决了我在开发过程中遇到的大部分问题。

在Chrome，Firefox，Safari和IE上进行了测试＆gt; 8（因为IE8与jsFiddle不兼容，我因为关心而失去了我的热情

我知道这是jQuery和javascript上下文的混合，但在这一点上我只是不想付出努力将其转换为jQuery。我知道，这很简单。我现在已经完成了这件事。希望其他人可以从这个解决方案中受益。

Answer 13

我把它从（（How to control positioning of jQueryUI datepicker））

$ .extend（$。datepicker，{_ checkOffset：function（inst，offset，isFixed）{return offset}}）;

它有效!!!

Answer 14

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

Answer 15

他们将班级名称更改为ui-datepicker-trigger

所以这适用于jquery 1.11.x

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

Answer 16

或者您可以在dateSelect对象和api上一起使用focus事件。您可以将顶部，底部和左侧交换为右侧或中央（或者实际上是您希望从位置api获得的任何内容）。这样，您就不需要间隔或任何疯狂的复杂解决方案，并且可以根据输入的位置来配置布局以适合您的需求。

dateSelect.focus(function () {
    $("#ui-datepicker-div").position({
        my: "left top",
        at: "left bottom",
        of: $(this)
    });
});

Answer 17

$('.PDatePicker').MdPersianDateTimePicker({
                Placement: 'top',          
            });

Answer 18

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

Answer 19

在Jquery.UI中，只需更新_checkOffset函数，以便在返回offset之前将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;
    },

Answer 20

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

Answer 21

值得注意的是，如果IE陷入怪癖模式，您的jQuery UI组件和其他元素将被错误定位。

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

<!DOCTYPE html>

使用过渡会使事情变得混乱。希望这将在未来节省一些时间。

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

21 个答案: