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

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

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

这是我正在使用的:

$('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文件中重载了类,所以我可以更改主题或更新小部件而无需重新输入我的特定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);
    }
})

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

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

$('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
    }
});