定位 Angular UI 引导程序 Datepicker

Question

我对 angularjs ui datepicker 有一个“小”问题。我需要以某种方式指出，如果输入带有日期选择器附加，应该从输入的左下角显示弹出窗口（默认）

或者如果我想从输入的右下角改为。这是因为在我正在创建的页面中，我的输入非常靠近页面的右侧，当我附加日期选择器时，会发生这种情况（日期选择器被剪切，现在出现水平滚动）：

但问题是我在两个位置都需要日期选择器（根据图像中相关的情况）。

有人知道如何解决这个问题吗？我尝试更改 datepicker 弹出模板中内联的 left 属性，但它始终是一个固定值，我认为这不是真正的选择。

谢谢

Answer 1

https://github.com/angular-ui/bootstrap/issues/1012

丑陋的黑客：

<div class="hackyhack">
  <input datepicker-popup="...">
</div>

魔术CSS：

.hackyhack {
  position: relative;
}
.hackyhack .dropdown-menu {
   left: auto !important;
   right: 0px;
 }

Answer 2

现在最新的 angular-ui 1.2.0 及以上版本在 uib-datepicker-popup 设置中有popup-placement 选项。

来自文档的快速摘要。

popup-placement（默认：自动左下角，配置：'placement'）- 在展示位置之前传入由空格分隔的“auto” 启用自动定位，例如：“自动左下角”。弹出窗口将 尝试定位它适合最近的可滚动祖先的位置。 接受：

top - 顶部弹出，水平居中于输入元素。

top-left - 顶部弹出，左边缘与输入元素左边缘对齐。

top-right - 顶部弹出窗口，右边缘与输入元素右对齐 边缘。

bottom - 底部弹出，水平居中输入 元素。

bottom-left - 底部弹出，左边缘与输入对齐 元素左边缘。

bottom-right - 底部弹出，右边缘对齐 与输入元素右边缘。

left - 在左侧垂直弹出 以输入元素为中心。

left-top - 左侧弹出窗口，上边缘对齐 与输入元素的顶部边缘。

left-bottom - 左侧底部边缘的弹出窗口 与输入元素底部边缘对齐。

right - 右侧弹出窗口， 垂直居中于输入元素。

right-top - 右侧弹出窗口，顶部 边缘与输入元素顶部边缘对齐。

右下 - 弹出 右，底边与输入元素底边对齐。

在你的情况下，我认为bottom-right 会起作用。

与this plunker 一起玩以了解更多详情。

Answer 3

此 CSS 解决方案可能比更改/破解 Angular .js 文件更简单：

将您的日期选择器包装在一个 div 中，然后覆盖日期选择器的 .dropdown-menu 类的边距 CSS：

<div id="adjust-left">
   <your-datepicker-here/>
<div>

然后，在 CSS 中：

#adjust-left .dropdown-menu{
    /* Original value: margin: 2px 0 0; */
    margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */
}

Answer 4

是的，我如上所述破解了我的 angular-ui.0.7.0.tpls.js 文件，它运行得非常好：

function updatePosition() {
    scope.position = appendToBody ? $position.offset(element) : $position.position(element);
    scope.position.top = scope.position.top + element.prop('offsetHeight');

    var padding = 20; //min distance away from right side
    var width = popupEl.outerWidth(true);
    var widthOver =  $('body').outerWidth(true) - (scope.position.left + width + padding);

    if(widthOver < 0) {
        scope.position.left = scope.position.left + widthOver;
    }
}

Answer 5

如果你想实现一个通用的解决方案，这是仅仅通过改变datepicker-popup的模板无法实现的。

您必须更改指令内的updatePosition 函数，以便 scope.position.left 相当于这样的：

 scope.position.left += scope.position.width - $position.position(popupEl).width;

但同样，您必须确保在 popuEl 可见后“读取”它的宽度，否则您将得到零。此外，如果您转到另一种模式（选择月份或年份），尽管弹出窗口的宽度可能会改变，但位置不会更新。

我只想说，这个功能不是一两行改动，可能最好在https://github.com/angular-ui/bootstrap/issues?state=open打开一个请求，可能有人愿意进一步调查！