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

Question

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

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

score 124 · Accepted Answer

这是我正在使用的：

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

您可能还想在左边距添加一点，这样它就不会正好靠在输入字段上。

score 42 · Accepted Answer

我直接在 CSS 中做：

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

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

我不修改 jquery-ui CSS 文件；我在我的主 CSS 文件中重载了该类，因此我可以更改主题或更新小部件，而无需重新输入我的特定模块。

score 39 · Accepted Answer

这是我的 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);
    }
})

score 33 · Accepted Answer

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

score 20 · Accepted Answer

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

score 18 · Accepted Answer

这对我有用：

beforeShow: function(input, inst) {
    var $this = $(this);
    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);
}

score 8 · Accepted Answer

首先，我认为 datepicker 对象中应该有一个afterShowing方法，您可以在 jquery 在方法中完成所有巫术之后更改位置_showDatepicker。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可能会破坏您的代码。

score 4 · Accepted Answer

我需要根据我的无边界输入控件所在的父 div 定位日期选择器。为此，我使用了 jquery UI 核心中包含的“位置”实用程序。我在 beforeShow 活动中做到了这一点。正如上面其他人评论的那样，您不能直接在 beforeShow 中设置位置，因为 datepicker 代码将在完成 beforeShow 功能后重置位置。要解决这个问题，只需使用 setInterval 设置位置。当前脚本将完成，显示日期选择器，然后重新定位代码将在日期选择器可见后立即运行。尽管它永远不会发生，但如果日期选择器在 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);
        }

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

给我的日期选择器输入字段一个类“ .datepicker2 ”
从顶部找到它的当前位置并
定位弹出框，类名为“ .ui-datepicker ”

这是我的代码。

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

这里“40”是我预期的像素，你可以用你的来改变。

score 2 · Accepted Answer

一个非常简单的jquery函数。

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

score 2 · Accepted Answer

我花了很多时间试图为我正在开发的一个新网站的几个页面解决这个问题，但似乎没有任何效果（包括上面我实现的各种解决方案。我猜 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());
});

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

在 Chrome、Firefox、Safari 和 IE>8 上进行了测试（因为 IE8 不能很好地与 jsFiddle 一起使用，我正在失去关心的热情

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

score 2 · Accepted Answer

我从（（如何控制 jQueryUI datepicker 的定位））

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

有用！！！

score 2 · Accepted Answer

或者您可以一起使用 dateSelect 对象和位置 api 上的焦点事件。您可以将顶部和底部和左侧交换为右侧或中心（或者实际上是您想要从位置 api 获得的任何东西）。这样您就不需要间隔或任何极其复杂的解决方案，您可以根据输入的位置配置布局以满足您的需求。

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

所以这适用于jquery 1.11.x

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

score 0 · Accepted Answer

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

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

<!DOCTYPE html>

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

这是另一个解决方案。

创建函数来固定位置

 function setDatepickerPos(input, inst) {
 var rect = input.getBoundingClientRect();
 // use 'setTimeout' to prevent effect overridden by other scripts
 setTimeout(function () {
     var scrollTop = $("body").scrollTop();
     inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop });
 }, 0);}

将函数添加到 datepicker 的“beforeShow”属性中

 $('#MyDatepicker').datepicker({
 dateFormat: "yy-mm-dd",
 changeMonth: true,
 changeYear: true,
 defaultDate: +0,
 inline: true,
 beforeShow: function (input, inst) { setDatepickerPos(input, inst) },});

这是参考链接：链接。所有的学分都应该去Aries.me

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

22 回答 22

Related

Reference