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

javascript jquery jquery-ui jquery-ui-datepicker

2022-08-30 05:08:13

任何想法如何让日期拾取器出现在关联的文本框的末尾，而不是直接在它下面？通常的情况是，文本框朝向页面底部，DatePicker向上移动以解释它并完全覆盖文本框。如果用户想要键入日期而不是选择日期，则不能。我宁愿让它出现在文本框之后，这样它如何垂直调整都无关紧要。

任何想法如何控制定位？我没有看到小部件的任何设置，而且我没有任何运气调整CSS设置，但我很容易错过一些东西。

答案 1

以下是我正在使用的内容：

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

您可能还想在左边距上添加更多内容，这样它就不会正好与输入字段相对。

答案 2

我直接在CSS中执行此操作：

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

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

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