Answers:
这个问题的公认答案实际上不是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'});
}
});
您可能还想在左边距处添加一些内容，以免与输入字段不符。
$(this).position(my:'left top', at:'left bottom', of:'#altField')因为我使用datepicker的altField选项进行显示）
我直接在CSS中执行此操作：
.ui-datepicker {
margin-left: 100px;
z-index: 1000;
}
我的日期输入字段均为100px宽。我还添加了z-index，因此日历也显示在AJAX弹出窗口上方。
我不修改jquery-ui CSS文件；我在主CSS文件中重载了该类，因此无需重新输入特定的mod即可更改主题或更新小部件。
这是我的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>这对我有用：
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);
首先，我认为afterShowingdatepicker对象中应该有一个方法，您可以在jquery在该_showDatepicker方法中完成所有巫毒操作后更改位置。另外，preferedPosition还需要一个名为的参数，因此，如果对话框在视口外呈现，则可以对其进行设置和jquery对其进行修改。
最后一件事情有一个“把戏”。如果您研究此_showDatepicker方法，将会看到使用private变量$.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定位datepicker。为此，我使用了jQuery UI核心中包含的“ position”实用程序。我在beforeShow事件中做到了。正如上面的其他评论所述，您不能直接在beforeShow中设置位置，因为日期选择器代码将在完成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);
}我用我的自定义jquery代码修复了它。
给我的datepicker输入字段一个类“ .datepicker2 ”
从顶部找到其当前位置，然后
定位弹出框，其类名为“ .ui-datepicker ”
这是我的代码。
$('.datepicker2').click(function(){
var popup =$(this).offset();
var popupTop = popup.top - 40;
$('.ui-datepicker').css({
'top' : popupTop
});
});这里“ 40”是我期望的像素，您可能会随自己的像素而改变。
修复显示位置问题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();
}
}我花了很多时间试图在正在开发的新站点的几页页面中找出此问题，但似乎没有任何效果（包括我实施的上述各种解决方案。我猜想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。我知道会很简单。我现在已经完成了这件事。希望其他人可以从此解决方案中受益。
我把它从（（如何控制jQueryUI的日期选择器的定位））
$ .extend（$。datepicker，{_checkOffset：function（inst，offset，isFixed）{return offset}}）;;
有用 ！！！
或者，您可以在dateSelect对象和position api上一起使用focus事件。您可以将顶部，底部和左侧交换为右侧或中央（或者实际上是您希望从位置api获得的任何内容）。这样，您就不需要间隔或任何复杂的解决方案，并且可以根据输入的位置来配置布局以适合您的需求。
dateSelect.focus(function () {
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
});这会将功能放入名为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',
});