知道如何让 DatePicker 出现在相关文本框的末尾而不是正下方吗？倾向于发生的是文本框位于页面底部，并且 DatePicker 向上移动以解决它并完全覆盖文本框。如果用户想输入日期而不是选择日期，他们不能。我宁愿让它出现在文本框之后，这样它垂直调整的方式就无关紧要了。
知道如何控制定位吗？我没有看到小部件的任何设置，也没有调整 CSS 设置的运气，但我很容易遗漏一些东西。
【问题讨论】：
标签： javascript jquery jquery-ui jquery-ui-datepicker
这是我正在使用的：
$('input.date').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({
marginTop: -input.offsetHeight + 'px',
marginLeft: input.offsetWidth + 'px'
});
}
});
您可能还想在左边距添加更多内容，这样它就不会正好在输入字段的正上方。
【讨论】：
$(this).position(my:'left top', at:'left bottom', of:'#altField')（因为我使用 datepicker 的 altField 选项进行显示）
我直接在 CSS 中做：
.ui-datepicker {
margin-left: 100px;
z-index: 1000;
}
我的日期输入字段都是 100 像素宽。我还添加了 z-index，因此日历也出现在 AJAX 弹出窗口上方。
我没有修改 jquery-ui CSS 文件；我在我的主 CSS 文件中重载了该类，因此我可以更改主题或更新小部件，而无需重新输入我的特定模块。
【讨论】：
这是我对 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);
}
})
【讨论】：
afterShow 方法中这样做。
这是另一个适合我的变体，调整 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>【讨论】：
这个问题的公认答案实际上不适用于 jQuery UI Datepicker。要更改 jQuery UI Datepicker 的位置，只需修改 css 文件中的 .ui-datepicker。 Datepicker的大小也可以这样改变，调整字体大小即可。
【讨论】：
这对我有用：
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);
}
【讨论】：
首先我认为在 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 的内部实现可能会破坏您的代码。
【讨论】：
我需要根据我的无边界输入控件所在的父 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);
}
【讨论】：
使用日期选择器后绑定焦点 更改 datepicker 小部件的 css 希望得到帮助
$('input.date').datepicker();
$('input.date').focusin(function(){
$('input.date').datepicker('widget').css({left:"-=127"});
});
【讨论】：
我用我的自定义 jquery 代码修复了它。
给我的日期选择器输入字段一个类“.datepicker2”
从顶部找到它的当前位置并
定位弹出框，类名为“.ui-datepicker”
这是我的代码。
$('.datepicker2').click(function(){
var popup =$(this).offset();
var popupTop = popup.top - 40;
$('.ui-datepicker').css({
'top' : popupTop
});
});
这里的“40”是我预期的像素，你可以用你的来改变。
【讨论】：
一个非常简单的jquery函数。
$(".datepicker").focus(function(event){
var dim = $(this).offset();
$("#ui-datepicker-div").offset({
top : dim.top - 180,
left : dim.left + 150
});
});
【讨论】：
我花了很多时间试图为我正在开发的一个新网站的几个页面解决这个问题，但似乎没有任何效果（包括上面介绍的我实现的各种解决方案。我猜是 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。会很简单，我知道。我现在已经完成了这件事。希望其他人可以从这个解决方案中受益。
【讨论】：
或者你可以在你的 dateSelect 对象和位置 api 上一起使用焦点事件。您可以将顶部和底部和左侧交换为右侧或中心（或者实际上是您想要从位置 api 获得的任何东西）。这样您就不需要间隔或任何极其复杂的解决方案，您可以根据输入的位置配置布局以满足您的需求。
dateSelect.focus(function () {
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
});
【讨论】：
我从 ((How to control positioning of jQueryUI datepicker))
$.extend($.datepicker, {
_checkOffset: function(inst, offset, isFixed) {
return offset
}
});
有效！！！
【讨论】：
修复显示位置问题 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();
}
}
【讨论】：
他们将班级名称改为ui-datepicker-trigger
所以这适用于jquery 1.11.x
.ui-datepicker-trigger {
margin-top:7px;
margin-left: -30px;
margin-bottom:0px;
position:absolute;
z-index:1000;
}
【讨论】：
另外值得注意的是，如果 IE 进入 quirks 模式，您的 jQuery UI 组件和其他元素将被错误定位。
为确保您不会陷入怪癖模式，请确保您将文档类型正确设置为最新的 HTML5。
<!DOCTYPE html>
使用过渡会使事情变得一团糟。希望这会在将来节省一些时间。
【讨论】：
这会将功能放入一个名为 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 函数，以便在返回 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;
},
【讨论】：
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
【讨论】：
$('.PDatePicker').MdPersianDateTimePicker({
Placement: 'top',
});
【讨论】：
这是另一种解决方案。
创建函数来固定位置
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);}
将函数添加到日期选择器的“beforeShow”属性中
$('#MyDatepicker').datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
defaultDate: +0,
inline: true,
beforeShow: function (input, inst) { setDatepickerPos(input, inst) },});
【讨论】：