这是我正在使用的：

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

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

我直接在 CSS 中做：

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

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

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

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

这是另一个对我很有效的变体，调整 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的大小也可以通过这种方式改变，只需调整字体大小即可。